jQuery selector to handle click function inside a loop result

Question

Sorry for asking this again but code won't execute. The problem is that I have a php loop that produces a html like below

<a class="js-delete-comment1" data-url="http://localhost/project/document_items/delete_item_comment/1">link</a>
<a class="js-delete-comment2" data-url="http://localhost/project/document_items/delete_item_comment/2">link</a>
<a class="js-delete-comment3" data-url="http://localhost/project/document_items/delete_item_comment/3">link</a>

Now, I want to select specific class to use as a jQuery selector but won't work. See below code

$("[id*=js-delete-comment]").each(function(){
    $(this).click(function(){

    var url = $('.js-delete-comment').attr('data-url');
    // var id  = $('.js-delete-comment').attr('data-id');
    $.ajax({
      url       : url,
      type      : 'POST',
      dataType  : 'json',
      success   : function(result) {
        console.log(result);
      }
    });
    });
  });

Any help would be much appreciated!

var url = $(this).attr('data-url'); or var url = $('.js-delete-comment').data('url'); — brk
– brk, Commented Jun 3, 2016 at 7:17
data-* in the markup is not included here I'll update the post now — claudios
– claudios, Commented Jun 3, 2016 at 7:20

Tushar · Accepted Answer · 2016-06-03 07:20:38Z

3

There is no ID on the elements, use class^= selector. There is no need of iterating over the elements and then bind the event, the event can be bind directly on the selector itself.

$("[class^='js-delete-comment']").click(function() {

Also, use $(this).data('url') to get the data-url attribute of the element that is clicked.

Code:

$("[class^='js-delete-comment']").click(function (e) {
    e.preventDefault(); // To stop page redirection

    var url = $(this).data('url');

    $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        success: function (result) {
            console.log(result);
        }
    });
});

edited Jun 3, 2016 at 7:20

answered Jun 3, 2016 at 7:18

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rayon Over a year ago

Also mention that there is no data-* attribute in markup..e.preventDefault() will be needed as well ;)..+1

Tushar Over a year ago

@Rayon Thanks, missed the preventD part.

claudios Over a year ago

Thanks, it's working now. and thanks also for specifying $(this).data('url')

Anoop Joshi P · Accepted Answer · 2016-06-03 07:19:09Z

1

You can use,

$("[class^=js-delete-comment]").click(function() {
  var url = $(this).data("url");
  $.ajax({
    url: url,
    type: 'POST',
    dataType: 'json',
    success: function(result) {
      console.log(result);
    }
  });
});

^ is the attribute starts with selector. you can use that for selecting the class
Use data() method for getting the data-url

edited Jun 3, 2016 at 7:19

answered Jun 3, 2016 at 7:17

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Comments

Jayesh Chitroda · Accepted Answer · 2016-06-03 07:19:14Z

1

Just use click event like this:

$("[class^=js-delete-comment]").click(function(){

    var url = $(this).attr('data-url');
    $.ajax({
      url       : url,
      type      : 'POST',
      dataType  : 'json',
      success   : function(result) {
        console.log(result);
      }
    });
});

edited Jun 3, 2016 at 7:19

answered Jun 3, 2016 at 7:17

Jayesh Chitroda

5,03915 silver badges18 bronze badges

Comments

Tanmay · Accepted Answer · 2016-06-03 07:37:10Z

I am not getting why you want to select these <a> links using class name. Just put your code inside parent <div>

  <div id="js-delete-comment"> 
       <a class="js-delete-comment1" data-url="http://localhost/project/document_items/delete_item_comment/1">link</a>
       <a class="js-delete-comment2" data-url="http://localhost/project/document_items/delete_item_comment/2">link</a>
       <a class="js-delete-comment3" data-url="http://localhost/project/document_items/delete_item_comment/3">link</a>
 </div>

And your JQuery code will be

    $('#js-delete-comment > a').click(function(){
    $.ajax({
      url       : $(this).data('url'),
      type      : 'POST',
      dataType  : 'json',
      success   : function(result) {
        console.log(result);
      }
    }); 
  });

Collectives™ on Stack Overflow

jQuery selector to handle click function inside a loop result

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related