CODEWITHSUNDEEP
jquery
qadenza
qadenza

Reputation: 9293

external javascript and loaded file

<div id='panelB'>
<?php include ("inc/items.php");?>
</div>

<script src='../jquery-2.1.1.min.js'></script>
<script src='index.js'></script>

In this scenario everything works. But later, inside index.js I have:

$("#modals_01 .linkL").click(function(){
$("#panelB").load("inc/items.php", { "category": a});
});

Now, javascript click.functions don't work on divs inside items.php.

I tried to place <script> tags inside items.php too, but in this case click functions (for example slideToggle a div) work twice !?

Upvotes: 0

Views: 39

Answers (1)

Jay Blanchard
Jay Blanchard

Reputation: 34416

It is because jQuery is unaware of the items that are loaded in items.php. You have to use on() to delegate the events there, so those events will bubble up the DOM tree.

http://api.jquery.com/on/

For instance - 

$(document).on('click', 'element', function() {

Now, when element is clicked the click event bubbles up to document where it will be acted on. The element that the event bubbles up to must exist at the time your jQuery code originally runs so jQuery is 'aware' of the element and can intercept bubbled events to that element. That makes document a fairly safe bet, but you can narrow it down if you desire.

Upvotes: 3

Related Questions