I have this code

   $(".insert").click(function(){
            $(".insert").ajaxStop(function(){
                $(".load").hide();
            });
            $(".insert").ajaxStart(function(){
                $(".load").show();
            });

            $.ajax({
                type: "GET",
                url: "edit.php",
                data: "action=add",
                success: function(msg){

                    $(".control").append(msg);
                }
            });


        });

as you can see this code append the HTML response of edit.php to the .control

the problem is

after appending the html .. all jquery changes wont apply in it .. because the $(document).ready() was already called before this this HTML code was born ...

can I call $(document).ready() every while I do any changes ????

I have this code

   $(".insert").click(function(){
            $(".insert").ajaxStop(function(){
                $(".load").hide();
            });
            $(".insert").ajaxStart(function(){
                $(".load").show();
            });

            $.ajax({
                type: "GET",
                url: "edit.php",
                data: "action=add",
                success: function(msg){

                    $(".control").append(msg);
                }
            });


        });

as you can see this code append the HTML response of edit.php to the .control

the problem is

after appending the html .. all jquery changes wont apply in it .. because the $(document).ready() was already called before this this HTML code was born ...

can I call $(document).ready() every while I do any changes ????

• javascript
• jquery

• 1 I want to apply the same jquery code that was applied on the page when I manipulate the DOM of the page. – Sulaiman Commented Jun 16, 2009 at 0:45

7 Answers 7

If you could elaborate on what you are doing in your document.ready function, I could perhaps give more specific help. You might find what you need in the live() function, which simulates applying events to objects even if they were added to the DOM after calling live().

To answer your question though, yes you can invoke the event handler just by doing this:

$(document).ready();

Take a look at jQuery live. It is meant to bind events automatically for new elements. It works for click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, and keyup.

I solved this demand with off and on again event for eg :

        $("div.value").off("click");
        $("img.cancelEdit").off("click");

        $("div.value").on("click", function (e) {
            var $this = $(this);
            $this.hide();
            $this.next().show();
        });

        $("img.cancelEdit").on("click", function (e) {
            var $this = $(this);
            $this.parent().hide();
            $this.parent().prev().show();
        });

and You can use Selector.Live() ;

Yes, calling the ready function with an argument (whether it's a reference to a function or an anonymous function), will append it to the chain of functions jQuery calls on the event.

Depending on the structure of the DOM manipulation you are doing, you might be able to use event delegation to apply event handlers to newly created DOM elements.

http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

If you need that to run when the document is ready, wrap it in $(document).ready(function(){}); and it will run at the appropriate time.

You can add rules to the .ready() method of document in multiple places.

Use on() instead of live(). live() has some drawbacks and it is depreciated.