[jQuery] Re: Accessing Elements after adding them with Append
Hi mkmanning,
works like a charm, thanks a lot! :)
Daniel
On 2 Sep., 18:00, mkmanning wrote:
> Use .live()
>
> http://docs.jquery.com/Events/live#typefn
>
> On Sep 2, 1:51 am, Daniel wrote:
>
>
>
> > Hi There,
>
> > I'm having trouble accessing some Elements with jQuery after I created
> > them and added them to the HTML. I want to add some Checkboxes to my
> > Site as soon as the user clicks another Checkbox. That works just
> > fine. But if the user clicks on one of these added checkboxes, i want
> > an event to trigger, too. For starters, i just want to alert a
> > message. But this doesnt happen.
>
> > Here's my code:
>
> > function load(katstring) {
> > var mykats = '';
> > $('div#kategorien input:checkbox:checked').each(function() {
> > mykats += "&mykategorien[]=" + $(this).attr('id').substr(4);
> > });
> > $.post('ajaxfunctions.php', '&function=updateCategories', function
> > (data){
> > var kattext = '';
> > kattext += '';
> > for (index in data) {
> > kattext += ' > name="category[]"
> > value="'+data[index]+'" />'+data[index]+'';
> > }
> > kattext += '';
>
> > $('div#categories div.select').html(kattext);
> > },'json');
>
> > }
>
> > $('div#categories div.select ul li input').click( function() {
> > alert("clicked");
>
> > });
>
> > So on click of the new, added checkboxes, i want to alert "clicked".
> > Nothing More. But that just won't happen. First, i figured the problem
> > lies in just adding some html Text and not properly adding the
> > elements to the DOM Tree. So i tried something like this:
>
> > function load(katstring) {
> > var mykats = '';
> > $('div#kategorien input:checkbox:checked').each(function() {
> > mykats += "&mykategorien[]=" + $(this).attr('id').substr(4);
> > });
> > $.post('ajaxfunctions.php', '&function=updateCategories', function
> > (data){
> > var cul = document.createElement('ul');
> > for (index in data) {
> > var cli = document.createElement('li');
> > var cinput = document.createElement('input');
> > var ctext = document.createTextNode(data[index]);
> > cli.appendChild(cinput);
> > cli.appendChild(ctext);
> > cul.appendChild(cli);
> > }
> > document.getElementById('categories').appendChild(cul);
> > },'json');
>
> > }
>
> > $('div#categories ul li input').click( function() {
> > alert("clicked");
>
> > });
>
> > In this Code all the Element Attributes are missing but I think you
> > get what i was trying. ;) So, now I think the Elements are added
> > properly to DOM tree. But still, when I click on one of the added
> > input Elements, nothing happens.
>
> > What am I doing wrong? How can i get jQuery to recognize the Elements
> > I added?
>
> > Can you please help? Thanks a lot.
>
> > battlewizz
[jQuery] Re: Accessing Elements after adding them with Append
Use .live()
http://docs.jquery.com/Events/live#typefn
On Sep 2, 1:51 am, Daniel wrote:
> Hi There,
>
> I'm having trouble accessing some Elements with jQuery after I created
> them and added them to the HTML. I want to add some Checkboxes to my
> Site as soon as the user clicks another Checkbox. That works just
> fine. But if the user clicks on one of these added checkboxes, i want
> an event to trigger, too. For starters, i just want to alert a
> message. But this doesnt happen.
>
> Here's my code:
>
> function load(katstring) {
> var mykats = '';
> $('div#kategorien input:checkbox:checked').each(function() {
> mykats += "&mykategorien[]=" + $(this).attr('id').substr(4);
> });
> $.post('ajaxfunctions.php', '&function=updateCategories', function
> (data){
> var kattext = '';
> kattext += '';
> for (index in data) {
> kattext += ' name="category[]"
> value="'+data[index]+'" />'+data[index]+'';
> }
> kattext += '';
>
> $('div#categories div.select').html(kattext);
> },'json');
>
> }
>
> $('div#categories div.select ul li input').click( function() {
> alert("clicked");
>
> });
>
> So on click of the new, added checkboxes, i want to alert "clicked".
> Nothing More. But that just won't happen. First, i figured the problem
> lies in just adding some html Text and not properly adding the
> elements to the DOM Tree. So i tried something like this:
>
> function load(katstring) {
> var mykats = '';
> $('div#kategorien input:checkbox:checked').each(function() {
> mykats += "&mykategorien[]=" + $(this).attr('id').substr(4);
> });
> $.post('ajaxfunctions.php', '&function=updateCategories', function
> (data){
> var cul = document.createElement('ul');
> for (index in data) {
> var cli = document.createElement('li');
> var cinput = document.createElement('input');
> var ctext = document.createTextNode(data[index]);
> cli.appendChild(cinput);
> cli.appendChild(ctext);
> cul.appendChild(cli);
> }
> document.getElementById('categories').appendChild(cul);
> },'json');
>
> }
>
> $('div#categories ul li input').click( function() {
> alert("clicked");
>
> });
>
> In this Code all the Element Attributes are missing but I think you
> get what i was trying. ;) So, now I think the Elements are added
> properly to DOM tree. But still, when I click on one of the added
> input Elements, nothing happens.
>
> What am I doing wrong? How can i get jQuery to recognize the Elements
> I added?
>
> Can you please help? Thanks a lot.
>
> battlewizz
[jQuery] Re: Accessing Elements after adding them with Append
hi daniel,
You have to bind click function after the element was append to DOM. But
there is a problem Jquery support multiple binding. So you have to first
unbind the click function, then append an element to the DOM and then bind
click function. I think this code will help you -:
$("div#categories ul li input").unbind('click',alertfunction);
//append element
$("div#categories ul li input").bind('click',alertfunction);
function alertfunction()
{
alert("clicked");
}
Thanks
Rupak
On Wed, Sep 2, 2009 at 2:21 PM, Daniel wrote:
>
> Hi There,
>
> I'm having trouble accessing some Elements with jQuery after I created
> them and added them to the HTML. I want to add some Checkboxes to my
> Site as soon as the user clicks another Checkbox. That works just
> fine. But if the user clicks on one of these added checkboxes, i want
> an event to trigger, too. For starters, i just want to alert a
> message. But this doesnt happen.
>
> Here's my code:
>
> function load(katstring) {
>var mykats = '';
>$('div#kategorien input:checkbox:checked').each(function() {
>mykats += "&mykategorien[]=" + $(this).attr('id').substr(4);
>});
>$.post('ajaxfunctions.php', '&function=updateCategories', function
> (data){
>var kattext = '';
>kattext += '';
>for (index in data) {
>kattext += ' name="category[]"
> value="'+data[index]+'" />'+data[index]+'';
>}
>kattext += '';
>
>$('div#categories div.select').html(kattext);
>},'json');
> }
>
> $('div#categories div.select ul li input').click( function() {
>alert("clicked");
> });
>
> So on click of the new, added checkboxes, i want to alert "clicked".
> Nothing More. But that just won't happen. First, i figured the problem
> lies in just adding some html Text and not properly adding the
> elements to the DOM Tree. So i tried something like this:
>
> function load(katstring) {
>var mykats = '';
>$('div#kategorien input:checkbox:checked').each(function() {
>mykats += "&mykategorien[]=" + $(this).attr('id').substr(4);
>});
>$.post('ajaxfunctions.php', '&function=updateCategories', function
> (data){
>var cul = document.createElement('ul');
>for (index in data) {
>var cli = document.createElement('li');
>var cinput = document.createElement('input');
>var ctext = document.createTextNode(data[index]);
>cli.appendChild(cinput);
>cli.appendChild(ctext);
>cul.appendChild(cli);
>}
>document.getElementById('categories').appendChild(cul);
>},'json');
> }
>
> $('div#categories ul li input').click( function() {
>alert("clicked");
> });
>
> In this Code all the Element Attributes are missing but I think you
> get what i was trying. ;) So, now I think the Elements are added
> properly to DOM tree. But still, when I click on one of the added
> input Elements, nothing happens.
>
> What am I doing wrong? How can i get jQuery to recognize the Elements
> I added?
>
> Can you please help? Thanks a lot.
>
> battlewizz
>
