external javascript and loaded file

Question

<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 !?

I don't know how many times this question has already been asked... Use $('#panelB').on("click", "#modals_01 .linkL", function(){ — Regent
– Regent, Commented Sep 26, 2014 at 20:54
@Reagent As many times as closures inside loops sharing a variable — Ruan Mendes
– Ruan Mendes, Commented Sep 26, 2014 at 21:16

Jay Blanchard · Accepted Answer · 2014-09-26 20:54:28Z

3

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.

answered Sep 26, 2014 at 20:54

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

qadenza Over a year ago

Jay, I tried $(document).on("click", "#modals_01 .linkL", function()..., but still doesn't work. For example $(".cardBtn").click(function()... doesn't work. cardBtn is inside items.php

Jay Blanchard Over a year ago

Then you should say $(document).on('click', '.cardBtn', function()...

Collectives™ on Stack Overflow

external javascript and loaded file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related