Jquery, alert onclick of data by get method not working

Question

I think this is some kind of bug. I have no idea, because I am not much of advanced on jquery.

What I am trying to do is, do a get request> value.html(result)>. Once the data is shown on the page, which are some span buttons, I made a small onclick function for testing, but it is not working.

$('#tag').click(function(){ alert(0); }); });

An get request example:

$.get( "tags.php?page=1&cat=dogs", function( data ) {
    $( ".result" ).html( data );
});

and this is what tags.php returns:

<span class="btn btn-default" role="button" id="tag">aaa</span><span class="btn btn-default" role="button" id="tag">bbb</span>

So this data is shown into the page correctly, but what I am trying to do is get the value of span. As you can see I made a simple alert function if span was clicked and it does not work. It works with other span buttons on the page, but not with this one which are displayed form get request.

Thanks for the help and sorry for bad english.

Try `$(document).on('click','#tag',function(){alert(0);});`. This way, the event is bound to the document, not to not-yet-existing elements. — blex, Aug 28 '14 at 14:37
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Mritunjay, Aug 28 '14 at 14:38
Oh, and you have 2 `span` elements with the ID `#tag`. That is not valid. Use classes if you are going to have multiple elements — blex, Aug 28 '14 at 14:40
In your question you posted an extra `});`, does it correspond to anything in your actual code? If not, remove it. — blex, Aug 28 '14 at 14:44
@blex, yeah sorry, it worked for the first element and not for others — user3585333, Aug 28 '14 at 14:45
That is because you used the same IDs. If you do `$(document).on('click','.btn',function(){alert(0);});`, you'll see it works. — blex, Aug 28 '14 at 14:56

score 1 · Answer 1 · answered Aug 28 '14 at 14:41

1

try this

$("body").on("click","#tag",function(){alert(0);});});

answered Aug 28 '14 at 14:41

Dotnet Learners

96
2

same result as blex's code, it works on first span but not on others – user3585333 Aug 28 '14 at 14:47
use a class eg. ".tag", not "#tag" because you cant have multiple elements with the same id. – Marius Darila Aug 28 '14 at 15:06
Yes, adding same id for multiple controls in not a Valid HTML, can you try with calss name as suggested by @MariusDarila – Dotnet Learners Aug 28 '14 at 15:15

score 0 · Answer 2 · answered Aug 28 '14 at 16:22

0

Just bind the event after you place the HTML:

$.get("tags.php?page=1&cat=dogs", function(data) {
    $(".result").html(data);
    $(".result").find('#tag').click(function() {
        alert("Hello world!");
    });
});

answered Aug 28 '14 at 16:22

DoubleA

1,452
11
23

Jquery, alert onclick of data by get method not working

2 Answers2