1

I have div with unique id and I'm trying to get that div id with jQuery

<div class="quantity" id="UNIQUE_ID">Quantity</div>

Everything works good, but after loading div with ajax - I just can't get id from loaded div.

$('.quantity').click(function() {       
    $.post('quantity.php', { id: $(this).attr('id') }, function(output) {
        $(this).html(output);
    }); 
});

Any ideas?

Vaidas
  • 968
  • 9
  • 22
  • Are you sure your `click` function works after loading the content. The problems looks like your `onclick` binding doesn't work after the div gets refreshed. Try using `on()` function of jquery, that might solve your problem – face Jul 07 '13 at 21:38
  • Question: Why are you using $('.quantity'), and later $('#'+ id) ? You should be using one or the other, not switching back n forth. Answer to problem: Im almost 200% sure that $unique_id is never written out correctly. Fix that, or just use $('.quantity') to add your data like you did when selecting it in the first place. – Robert Hoffmann Jul 07 '13 at 21:39
  • Also remember: class = multiple instances, id = unique, so you probably shouldn't be selecting via the class to start with, especially since you already attributed it an id value (which like i said before i'm sure is not written out correctly) – Robert Hoffmann Jul 07 '13 at 21:41
  • I'm actually need ID to know what line to load from `MySQL`, and on function not helped much. If I'm loading `script` with content using post - everything works, but I don't want to have repeating script. – Vaidas Jul 07 '13 at 21:48
  • Use data-attributes if storing values. But i'm still sure your id is wrong or invalid (starts with a number, contains invalid characters, etc) – Robert Hoffmann Jul 07 '13 at 21:51
  • ID is `quantity_1` (numbers changes with `MySQL` unique ID), I have a table with a lot of lines and don't really want to bind click on every unique ID, the plan is hit the div field to receive ID and load the exact number from `MySQL` database. Everything works, but not with newly loaded content. – Vaidas Jul 07 '13 at 21:57
  • if you inject divs dynamically, then like face was trying to point out, you need to use live() :: $(document).on('click', '.quantity', function(){ ...}); – Robert Hoffmann Jul 07 '13 at 22:17

2 Answers2

3

This should work

$('.quantity').click(function() {
    var that = this;        

    $.post('quantity.php', { quantityId: $(that).attr('id') }, function(data) {
        $(that).html(data);
    }); 
});

But this is how i'd write it

<div class="quantity" data-id='<?=$unique_id?>'>
    Quantity
</div>

$('.quantity').on('click', function() {
    var that = this;        

    $.post('quantity.php', { quantityId: $(that).data('id') }, function(data) {
        $(that).html(data);
    }); 
});

And for dynamic divs

<div class="quantity" data-id='<?=$unique_id?>'>
    Quantity
</div>

$(document).on('click', '.quantity', function() {
    var that = this;        

    $.post('quantity.php', { quantityId: $(that).data('id') }, function(data) {
        $(that).html(data);
    }); 
});
Robert Hoffmann
  • 2,366
  • 19
  • 29
  • Thanks for `data-id` idea - will use that. Sadly it still not working on AJAX loaded content. – Vaidas Jul 07 '13 at 22:16
  • Thanks. Remember classes/id's should reflect actual html/css stuff. Whenever you need to store productId's, or even full JSON objects, data-attributes are your friend. Small tip: data-something="value" is interpreted as a string, data-something='value' is converted to JSON directly letting you skip the JSON.parse stuff – Robert Hoffmann Jul 07 '13 at 22:32
1

The onclick binding to your div won't work once the div has been refreshed (it binded on document.ready() right?). The solution will be either to rebind the function to your element every time you change it (a bad one) or use the on() function of jquery. Example code:

$(document).on('click', '.quantity', function(){
    var id = $(this).attr('id');        

    $.post('quantity.php', { quantityId: id }, function(data){
        $('#'+ id).html(data);
    }); 
});

UPDATE: As discussed in comments, the on method should bind to the document as a whole and not the the class to actually work as the deprecated live() method.

face
  • 1,503
  • 13
  • 27