CODEWITHSUNDEEP
javascriptjqueryajax
max
max

Reputation: 3736

loading part of a page with it's javascript code in the another page

i have a table with a button which adds some rows to the table and it works fine , i want to load their parent div in the another page via jquery Load function but when i load them the button wont work anymore

here is my html code , actually i just wrote this but you get the idea and also ignore the syntax problems 

<head>

<script>
$(function(){
$('#adder').click(function(){
$(this).siblings('table').append('<tr><td></td></tr>');
}
}
</script>

<head>
<body>
<div id="main">
<table> </table>
<a href="" id="adder"> </a>
</div>

</body>

in the another page altho i have the same jquery code in the header but the button doesn't work anymore here is my other page

   <head>
    <script>
    function loader(){
    $('#loader').load('a.php #main');
    }
    </script>
    </head>
<body>
<div id="loader"></div>
</body>

i tride to ad jq code at the end of div so when it's loaded in the another page jq get loaded too 

    <div id="main">
    <table> </table>
    <a href="" id="adder"> </a>
<script>
$('#adder').click(function(){
$(this).siblings('table').append('<tr><td></td></tr>');
}
</script>
    </div>

but still doesn't work

///////////////////////

another question :

how can i use live when there is no event ? for example i have a plugin which has some effects on page divs and its called on the page load time

<head> 
<script>
$(function(){
$('div').plugin(plugin settings);
})
</script>
</head>

now if i add a div to the page how should i use live so my new div get that effect ?

Upvotes: 0

Views: 592

Answers (3)

Cory Danielson
Cory Danielson

Reputation: 14501

$("body").delegate("#adder", "click", function(){
    $(this).siblings('table').append('<tr><td></td></tr>');
});

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

The big "ah ha!" moment for me learning delegates was to simply google for the definition of delegate.

del·e·gate    [n. del-i-git, -geyt; v. del-i-geyt] Show IPA noun, verb, -gat·ed, -gat·ing. noun 1. a person designated to act for or represent another or others; deputy; representative, as in a political convention.

It's one of those "computer sciency" words that doesn't make much sense until you've mastered the concept or googled the definition. It helps to know the definition before mastering the term. It was named "delegate" for a reason :p

In your example, the newly created elements added by the .load() are sort of these "juveniles" or "adolescents" that are too young to handle the responsibility of events. So when you request an event from them, the browser looks to the delegate in order to learn what should happen.

To add a plugin (your second question) to new DOM elements, you would have to enable the plugin during the load event.

$("body").delegate("div", "load", function(this){ 
    $(this).plugin( settings ); 
});

Upvotes: 0

DMac the Destroyer
DMac the Destroyer

Reputation: 5290

As @matino pointed out, you should use .live("click", function...) instead of .click(function...).

But also, you shouldn't expect the scripts from a.php to be loaded into the page you're calling .load from, as that function doesn't execute any javascript when you are loading page fragments.

from the jQuery docs:

Note: When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is however called with a selector expression appended to the URL, the scripts are stripped out prior to the DOM being updated, which is why they are never executed.

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382909

For the dynamically created elements, you need to use either live or delegate, example:

$('selector').live('click', function(){
  // your code here...
}

More Info: http://api.jquery.com/live/

Upvotes: 1

Related Questions