[Resolved] jQuery “append” happens twice – only in view, not elsewhere

[Author]

Posts

[Ido Angel]

hey,

take a look here:

hidden link

i have jQuery code to append text from checked input in a different place, like this:

$(".gender-group .checkbox input:checked").each(function() {
    var inigenderlabel= $(this).parent().text();
    $(".yoursearch .pickedgender").append("<span for="+$(this).attr("id")+">מין: "+inigenderlabel+"</span> ");
});

but it somehow appends the text twice on page load.
when i try the same code in JSfiddle it doesn't happen:

hidden link

any idea why?

thanks!

[Beda]

You should use jQuery namespace instead of $, when working with WordPress.
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/#achieving-great-results-with-little-coding-by-using-jquery

About the issue, I am not sure to understand.
I see you try to append a span with some text when a box is checked.
However, can you elaborate where on the page you link we should see this text?
I could not find it, either once or twice as stated in the problem report.

What is also possible is that you load the script twice, having added it to the Filter's Custom JS section in a front end event hook?

I would eventually also suggest, adding access details to a staging site copy of this website so we could take a closer look at how it's built and narrow down the issue.

[Ido Angel]

Hey Beda,
Here's an image. The highlighted area on the right is the search filter input, the highlighted area at the top is the result.
Changing $ to jQuery didn't do anything, and I don't think the script is loaded twice, it's in the Fitler's Custom JS Section under

jQuery(document).ready(function( $ ){

[Ido Angel]

Hey again. More errors which happen in jQuery but only on the site:

I'm trying to calculate the difference between the number in two fields.

Here, in JSFiddle, it works:

hidden link

And on the site - nope:

hidden link

it gives a crazy number in the results.

print screen attached.

any idea why this happens?

thanks!

[Ido Angel]

wait - the second issue (age difference) - my bad. got it to work.
but the append thing drives me nuts!

[Christian Cox]

The gender group checkbox checked selector finds 2 results:

$(".gender-group .checkbox input:checked")

Then jQuery.each loops over both of those results, so the text is appended twice. It's not happening in the fiddle because there is only one result found. This is probably happening because you have split the search form and results up into separate shortcodes. When you do this, the search form is actually inserted in the DOM twice, but one is hidden. You can try adding a div with a specific CSS class around the shortcode that only shows the search form, then target just that search form.

$(".just-the-search-form .gender-group .checkbox input:checked")

[Ido Angel]

AMAZING! Wasn't aware of that - and that totally worked. As always.
Thanks Christian!