Jquery - Scripts are conflicting

Question

In my parent page I use jquery to operate a tabbed area and also to load content (prices.php) into one of the tabs. This is the script on that page:

$(document).ready(function() {
    $("#tabcontent > div").hide(); // Initially hide all content
    $("#tabs li:first").attr("id","current"); // Activate first tab
    $("#tabcontent div:first").fadeIn(); // Show first tab content

    $('#tabs a').click(function(e) {
        e.preventDefault();
        if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
         return       
        }
        else{             
        $("#tabcontent > div").hide(); //Hide all content
        $("#tabs li").attr("id",""); //Reset id's
        $(this).parent().attr("id","current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
        }
    });
$('#prices').load('../prices_test.php?hid=<?php echo $hid;?>');
});

prices.php also uses Jquery to reveal a hidden area when a button is clicked. As the button is inside a do loop that might be repeated several times, I use $i and have the script inside the loop:

<td height="30px" colspan="3" align="right" style="padding-right:20px">
    <a href="javascript:void()" class="click<?php echo $i ?> buttonSearchList">&nbsp;&nbsp; Enquire or Book</a>
    <script>
        $("a.click<?php echo $i ?>").click(function() {
            $(".hiddenstuff<?php echo $i ?>").slideDown(1000),
            $("a.click<?php echo $i ?>").fadeOut(500);
        });
    </script>
</td>
</tr>
</table>
<div class="hiddenstuff<?php echo $i ?>" style="display:none">
<-- Content of "hiddenstuff" -->

Hiddenstuff reveals correctly when I run prices.php directly in the browser, but not when it is a part of the parent page. Therefore I'm assuming that there is a conflict between the two scripts. The parent page includes

$('#tabs a')

and there is

$("a.click<?php echo $i ?>")

in prices.php. Are these conflicting? If so, how do I prevent it? I've tried putting an extra class around a.click$i but that didn't help.

SOLUTION I moved the script from the ajax-loaded page to the parent page and re-wrote the first line as:

$("#prices").on('click', 'a.click', function() {

I've had to drop the "$i" bit, so the script acts on all instances of the code whenever one of them is clicked. I don't want to leave it that way, but I'm saving that for the Mk2 version. Thanks to all who replied.

Try adding a class to the `#tabs a` elements, and put that class into the selector. — Barmar, Feb 05 '14 at 18:04
Not sure if I'm understanding you correctly. I have added a class to all the elements in the
That seems like it should solve the problem. Now the two selectors shouldn't conflict, because they select different links. — Barmar, Feb 05 '14 at 18:19
Are you using AJAX to load content? Then see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Feb 05 '14 at 18:20
I load it with this $('#prices').load('../prices.php?hid='); after document.load. — TrapezeArtist, Feb 05 '14 at 18:35

score 0 · Answer 1 · answered Feb 05 '14 at 20:37

If 2 or more jQuery's are being imported onto your page each instance can be overwriting the previously loaded namespace. Depending on how the content is loaded and when the other versions are being loaded the newer files may overwrite the $ namespace that events have been bound to. Checkout the noConflict() function. This guy can do a few things, he can remove the instance of jQuery completely out of the global context and push it to a local var.

var jQ = jQuery.noConflict(true);
jQ('.someClass').click(function(){
   // do stuff
});

or it can simply remove a dependence on the $ shortcut. This means we need to use jQuery instead of $ when we want to reference that version of jQuery.

$.noConflict();
jQuery('.someSelector').click(function(){
   // more stuff doing
});

Jquery - Scripts are conflicting

1 Answers1

Linked