0

I looked up the load method to find an alternative to php includes. I got the load to add html dynamically and it works. The one issue though is that function aren't working. I think it's either an order issue, structure issue or plain logic. Any help to get my functions to work in dynamically generated html would be greatly appreciated. Sample structure below.

$(document).ready(function () {
    "use strict";

    $("header").load("/_includes/header.html");

});

$(window).bind("load", function () {
    "use strict";

    $('.class').click(function () {
        $('#id').slideToggle('fast');
    });
});
Alex H
  • 1,424
  • 1
  • 11
  • 25
riotgear
  • 451
  • 1
  • 5
  • 19

3 Answers3

3

If you have .class element defined inside header.html then you need to use event delegation as below:

$(document).on('click','.class',function () {
        $('#id').slideToggle('fast');
});

Event delegation should be used on controls which are added to DOM at later part or after DOM gets loaded.

UPDATE

When you attach event directly to element like below:

$('.element').click(function(){
....
});

or as below:

$('.element').on('click',function(){
....
});

those event will not get attached to the dynamically added elements or elements which are added after DOM load. So you need to attach event either to document targeting particular element in DOM as below:

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

or to its parent which was loaded during page load. For Ex:

Say you have below structure:

<div class="somediv">
   <!--Many other children elements here-->
</div>

Now you will add one more event either by append or by load or in any other possible ways and structure will become as below:

<div class="somediv">
  <!--Many other children elements here-->
  <button class="element">Click here<button> <!--This is dynamically added element -->
</div>

and now you can attach event to .somediv instead of attaching to document, since it was added during DOM load and newly added element will be inside this .somediv.

This will actually improve performance of code as you are explicitly telling jquery from where to start to search for the dynamically added .element and jquery can search it more faster instead of traversing from document

So you can write it as below:

$('.somediv').on('click','.element',function(){
 //^^^^parent div         ^^^dynamically added element
    //do anything here
});
Guruprasad J Rao
  • 29,410
  • 14
  • 101
  • 200
  • Can I do this with addClass and removeClass also? Lastly, can you tell me why what I have doesn't always work? I really want to understand why this isn't working. – riotgear Sep 02 '15 at 13:13
  • Thank you I think this makes sense. I will try it tonight. Can I use multiple $(document) in one javascript file? Also, Does it matter where the delegation goes in the javascript (beginning, middle, end etc.) ... – riotgear Sep 02 '15 at 13:17
  • @user3174713 You can use multiple `$(document)` to perform `event delegation`.. – Guruprasad J Rao Sep 02 '15 at 13:31
  • 1
    This worked. I understand this syntax now. Thank you for taking the time to explain it to me Rao!!! – riotgear Sep 03 '15 at 15:02
  • Anytime... Happy coding.. :) – Guruprasad J Rao Sep 03 '15 at 17:56
1

try this

$(document).ready(function () {
    "use strict";

    $("header").load("/_includes/header.html", function () {
       $('.class').click(function () {
           $('#id').slideToggle('fast');
       });
    });
});
Pepo_rasta
  • 2,842
  • 12
  • 20
0

Use .live() for older jQuery versions

$( ".class" ).live( "click", function() {
  $('#id').slideToggle('fast');
});

for older

$( selector ).live( events, data, handler );                // jQuery 1.3+
$( document ).delegate( selector, events, data, handler );  // jQuery 1.4.3+
$( document ).on( events, selector, data, handler );        // jQuery 1.7+
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
sajanyamaha
  • 3,119
  • 2
  • 26
  • 44