2

I have this inside a function:

$('#users').append($("<div id='usuarios'>").text(mensaje[1][i]));

I want to create an onclick event for this new <div>. How can I achieve this? I'm trying it like this outside the function:

$(document).ready(function(){
$('#usuarios').click(function() {
        alert("click");
    });
});

But it doesn't work.

icktoofay
  • 126,289
  • 21
  • 250
  • 231
Oscar
  • 49
  • 1
  • 7

5 Answers5

7

For jQuery 1.7+ you can attach an event handler to a parent element using .on()

$(document).ready(function(){
  $('body').on('click', '#usuarios', function() {
     alert("click");
  });
});

or Even better:

$(document).ready(function(){
  $('#users').on('click', '#usuarios', function() {
     alert("click");
  });
});
Anujith
  • 9,370
  • 6
  • 33
  • 48
  • 1
    $('body').live('click', '#usuarios', function() {})can also be used but as of jQuery 1.7, the .live() method is deprecated. – Parag Jan 08 '13 at 03:53
  • 2
    Even better would be `$('#users').on('click', '#usuarios', function() {`. You want the event handler on the closest parent that is not dynamic (better performance when lots of event handlers). That's why `.live()` was deprecated because it put all handlers on the `document`. – jfriend00 Jan 08 '13 at 04:08
  • @jfriend00 Among other nuisances, such as being *magic*, a wasted selector lookup, etc. – alex Jan 08 '13 at 05:47
5

You could do it inline (by chaining .append after .text), because that's just how jQuery's API works, but you could also put it in a variable, which looks better:

var usarios = $("<div id='usuarios'>").text(mensaje[1][i]);

usarios.click(function() {
    alert('click');
});

$('#users').append(usarios);
Ry-
  • 218,210
  • 55
  • 464
  • 476
  • 3
    @ATOzTOA: Dynamically added to the DOM by the `$('#users').append` line, yes. That's... the point? – Ry- Jan 08 '13 at 03:53
  • @ATOzTOA: No. Have you checked whether this doesn't work? ([Yes, it works.](http://jsfiddle.net/minitech/FP4Bn/)) – Ry- Jan 08 '13 at 03:54
  • I have been working with dynamic elements for a while, and `click()` never worked for a dynamic element. – ATOzTOA Jan 08 '13 at 03:56
  • @ATOzTOA: See parenthetical above. – Ry- Jan 08 '13 at 03:59
  • 2
    @ATOzTOA: There's no difference between "dynamic" elements and "regular" elements, except when they're added. If you try to find an element in the document before it's actually in the document, of course it won't work. But if you're creating the element, you've got a reference to which you can add all the event listeners you like. – Ry- Jan 08 '13 at 04:05
  • 1
    @ATOzTOA Your life was in danger before you knew this? – alex Jan 08 '13 at 04:22
  • @alex This would have saved me a lot of time... and time is life :) – ATOzTOA Jan 08 '13 at 05:35
  • No. Time is money. Your money was saved. You probably don't even need that raise anymore. – BoltClock Jan 08 '13 at 15:03
3

I've also faced this problem, if you put it inside the document.ready then it won't work. I've thought it was my syntax, but it's not.

Use the 

$(document).on('click', "input[id^='radiobox']", function () { 
    alert('hihi'); 
});

then it works

Code Lღver
  • 15,573
  • 16
  • 56
  • 75
ah-shiang han
  • 330
  • 1
  • 9
1

You are dynamically creating an element, so normal event handler won't work. You will have to use on() to attach event handler to your document.

$(document).on('click', "#usuarios", function() {
    // do your job here
});
ATOzTOA
  • 34,814
  • 22
  • 96
  • 117
1

Two ways

1.Jquery 1.7+

$(document).ready(function(){
  $('body').on('click', '#usuarios', function() {
     alert("click");
  });
});

2.Jquery<1.7

$(document).ready(function(){
  $('body').delegate('#usuarios','click', function() {
     alert("click");
  });
});
coolguy
  • 7,866
  • 9
  • 45
  • 71