How to active a code when it hasn't been born yet

Question

i am having some problems here. Here is my code:

                 $(document).ready(function() {
                     $("#button").click(function(){
                         alert("hello");
                         var a = $("textarea").val();
                         var b = $("#search").val();
                         var c = $("textarea").length;
                         var d = $("#search").length;
                         var array = [];
                         var st = "";
                         for(var e=0;e<c;e++)
                         {
                            for (var f=0;f<d;f++)
                            {
                               if(a[e+f] === b[f])
                               {
                                    alert(a[e+f]);
                                    array.push(a[e+f]);
                                    if (array.length === d)
                                    {
                                    for(var g in array)
                                       {
                                        st += array[g];
                                       }
                                        a.substr(e,e+f).replaceWith("vinh");
                                        break;                                      
                                    }                                   
                               }
                               else
                               {
                               break;
                               }
                            }

                         }
                     });
                });

The bad news is that when the document is ready, there isn't any $("#button") at first. Only after i trigger a code that append button to html but it is too late, the button won't run. Can anyone solve this ?. Many thanks to your help

Instead of using just click, use $("#button").on('click', function(){ .. — Samir, Jul 01 '16 at 08:50
Check this [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Shaunak D, Jul 01 '16 at 08:54
To Tharsan Sivakumar (your name is really hard to write) i said it, i inject it through a javascript code — Nguyễn Thế Vinh, Jul 01 '16 at 08:57
I believe that when the document is ready, it doesn't find button. And for that, the button won't run — Nguyễn Thế Vinh, Jul 01 '16 at 08:58
The .on("click" function) can be used for the element which are loaded at run time. I think the answer will give you the solution. — Samir, Jul 01 '16 at 09:01

M.Tanzil · Answer 1 · 2016-07-01T09:01:49.703

2

The best way to trigger click on dynamically created element is to listen to the click event in DOM then fire it on your desire element then it will check for the target where is click been fired.

Use

$(document).on("click","#button",function(){ // code goes here })

Learn more about .on visit the official jquery documentation Click Here

edited Jul 01 '16 at 09:01

answered Jul 01 '16 at 08:55

M.Tanzil

1,987
1
12
28

score 1 · Answer 2 · answered Jul 01 '16 at 08:54

$(document).ready(function() {
$(document).on("click","#button" function(){
    alert("hello");
    var a = $("textarea").val(),
        b = $("#search").val(),
        c = $("textarea").length,
        d = $("#search").length,
        array = [],
        st = "";

    for(var e=0;e<c;e++){
        for (var f=0;f<d;f++){
            if(a[e+f] === b[f]){
                alert(a[e+f]);
                array.push(a[e+f]);
                if (array.length === d){
                    for(var g in array){
                    st += array[g];
                    }
                    a.substr(e,e+f).replaceWith("vinh");
                    break;                                      
                }                                   
            }else{
                break;
            }
        }
    }                                       
});
});

it works but you forgot a comma between "#button" and function() — Nguyễn Thế Vinh, Jul 01 '16 at 09:01

score 0 · Answer 3 · edited May 23 '17 at 10:28

0

You have to use the buttons parent for this. This is an example using "body" as parent:

$("body").on("click", "#button", function(){
    // Add your code here
}

Take a look at this thread for more info: Event binding on dynamically created elements?

edited May 23 '17 at 10:28

Community

1
1

answered Jul 01 '16 at 08:57

Kamelkent

329
7
16

score 0 · Answer 4 · answered Jul 01 '16 at 08:59

0

You can write the jQuery code to be run on the button element in a separate .js file and load it asynchronously after the code that loads this button using $.getScript().

answered Jul 01 '16 at 08:59

Raunaq Sachdev

518
4
7

How to active a code when it hasn't been born yet

4 Answers4