Develop Reference

Wordpress search doesn't work on button click

I am trying to make search work on button click on opening of popup using below jQuery code
jQuery(function($) {
$('#secondaryButton').click(function() {
alert("The paragraph was clicked.");
$("button.elementor-search-form__submit").click();
});
});
I have tried adding script code in header.php it doesn't work
I also tried adding script code in custom js on page level using elementor pro plugin, it doesn't work
I am not sure why scripting doesn't work. The link which i am working is
https://adelaidebuildingconsulting.com.au/
Once you click search icon, a popup will open and i am looking to implement search on 'search' button click. Any help would be highly appreciated.

There's two issues in your code. Firstly the right-side panel which contains the #secondaryButton element doesn't exist in the DOM when the page loads, so you need to use a delegated event handler.
Secondly, you need to invoke the click() method on the button element directly, not through jQuery. To do that use [0] to retrieve the Element from the jQuery object:
$("button.elementor-search-form__submit")[0].click();
However, in this case better practice to submit the form element would be to invoke the submit event on that element, not the click of its button:
jQuery(function($) {
$(document).on('click', '#secondaryButton', e => {
$("form.elementor-search-form")[0].submit();
});
});
That being said, the best practice would be to completely remove the need for any JS hacks to form a relationship between your form and an external submit button. If you rearrange your HTML so that the clickable 'Search' element is a <button /> element within the form then you get the behaviour you require by default, without the need for any JS.

jQuery click firing multiple times

Update:
Seems like the problem has nothing to do with my code. I've been running the webpage over browser-sync and that's where the problem appears. When I open the static webpage in Chrome directly, everything seems to be working fine. Thank you to everyone for your help!
I'm working on my personal website and want to make a way to filter through my list of projects using buttons.
<div class="filters">
<button class="btn btn-filter">Android</button>
<button class="btn btn-filter">iOS</button>
<button class="btn btn-filter">Web Dev</button>
<button class="btn btn-filter">Data Science</button>
</div>
I'm trying to attach event listeners to the buttons by doing this, but it seems like the event listeners are being attached multiple times:
$(".btn-filter").each(function() {
console.log(this); // #1
$(this).click(function(e) {
e.preventDefault();
e.stopPropagation();
console.log(this); // #2
})
debugger;
})
I have also tried using the class selector. It doesn't work, I switched to .each() and $(this) to be sure the elements were being assigned event handlers only once.
$('.btn-filter').click(...)
Logs show that each button is selected once to be assigned a click listener, but when I actually click the buttons, only some fire once, and some fire 3 times. I use some because it doesn't always behave the same way each time the page is run.
I have tried the solutions described in
this post(off(), unbind(), stopPropagation()), but none have worked.
Using Google Chrome's debugger tools, it seems like at the breakpoint, this refers to the HTML element twice for every iteration of each, despite some clicks firing once and some three times.
I suppose I could just assign IDs and wire each button individually, but I want to know what I'm doing wrong here. Could anyone explain?

You are running a for each loop on the class, so it will create a new event handler for each element with the class. If you want just one event handler you need to write it like this:
$(".btn-filter").click(function() {
console.log($(this).text());
});
Buttons that show or hide specific content are best described with a data value or id
Edit: after learning you had this before I will add that nothing you supplied is causing the error you are receiving.

The problem with your code is is here
$(".btn-filter")**.each**(function() {
You should simplify it by simply doing something like this
$(".btn-filter").click(function(e) {
e.preventDefault();
e.stopPropagation();
console.log(e);
debugger;
})
Since you are already selecting via the class name $(".btn-filter") the function should be added to all the elements.

Call click event using class and get clicked value using .html()
$(document).ready(function () {
$(".btn-filter").click(function() {
alert($(this).html());
})
});
JSFiddler

jQuery events on external objects

I have a problem.
I'm looking for document-wide click events, but large chunks of my site is loaded through a div with an innerHTML object.
<div id="contentHolder">
<script>
document.getElementById("contentHolder").innerHTML='<object type="text/html" id="content" data="article.html"></object>';
</script>
</div>
A listener like this:
$(document).on("click", function (event){
alert("Click");
});
Only registers clicks on elements outside of the ContentHolder.
I realise that the loaded content probably has its own document.
Do any of you know of a way I can refer to this content inside the Object? :)
I read up on jQuery delegation, but it didn't seem to offer a solution to my problem.
I set up a semi-working example on Codepen. It doesn't seem to allow loading external pages, understandably so - but the problem persists even without any actual loading. The example works locally.
Edit
I solved the problem myself. Instead of using an HTML Object for a container, you can use jQuery append and the listeners will remain active not only from the sub-document's events but also the parent's.
$.get('document.html', function(result) {
$('#container').append(result);
});`

You can try this:
$('#contentHolder').on('click', '.class-to-be-named', function() {
// do your click stuff
});
It will bind the click event on #contentHolder and whenever you click within #contentHolder it will lookup if element #contentHolder was clicked, when is it calls the callback.

I solved the problem myself. Instead of using an HTML Object for a container, you can use jQuery append and the listeners will remain active not only from the sub-document's events but also the parent's.
$.get('document.html', function(result) {
$('#container').append(result);
});

Triggering button click in jQuery not working

Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.

We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();

While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here

The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt

You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');

try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/

Can we invoke click function on div class using Javascript

I have implemented colorbox functionality on a div class using
<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>
Now I want to know is it possible from Javascript to trigger an event which will dynamically open colorbox without me clicking on the div element.

See Jquery's trigger function
Jquery Trigger

You can call it like this:
$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});
Edit: You may need to run this first:
$.colorbox.init();

Check
http://api.jquery.com/trigger/
and
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524

One of the jQuery Solution you can use
$('selector').trigger('click');
Which will exactly work like a normal click pro-grammatically.
Note for this you've to load jQuery in your page. which can be loaded from one of the CDN server.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

Absolutely, Rahul, opening colorbox through the jquery click() function is easy. But first you'll need to change your docReady code to look more like this:
$(document).ready(function(){
$("#example-id").click(function() {
$(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
});
})
Notice here I have placed the code with the "open:true" option inside a click handler. You've probably already seen that having that option runnable right at docReady causes your colorbox to open when the page loads.
Now with the click handler ready, you can simply open the box with - well, a click, of course - but dynamically with this code:
$("#example-id").click();
Wherever you have this, your colorbox will open. So you could place it in an $.ajax() success or error handler or a $.load() completion handler. Also, I used a click handler, but if you don't need the click functionality, you could just as easily have placed the colorbox code in a standard function, then call the function whenever you need it.
By the way, I changed your exampleClass to example-id because having more than 1 element attached to the click handler will produce multiple calls to colorbox. This poses no problem if all classes open the same colorbox. If you are interested in seeing an example of the same class opening differing colorboxes, I can expand on this one (but right off I would start with simply embedding attributes into the tags and looking for them in the click handler).
One last note, colorbox is typically associated with an tag, which will have an href and a title. This is where colorbox will get the contents and caption from. You could simply add href and title tags to your . Html validators won't like the href in the div, though, so if that's important to you then you should just add it to the colorbox options:
$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })

Additionally, the function called upon trigger will need to call ColorBox in the mode where it is not assigned to an element.
So the .trigger() method invokes a function that invoke colorbox as shown below.
$.colorbox()
This method allows you to call ColorBox without having to assign it to an element.
Example: $.colorbox({href:'login.php'});
See more at the colorbox docs.