带有相同类的多个按钮上的jQuery按钮事件

Question

I am having trouble with a button.

With php I am setting the name of the button, so it is not known beforehand what the name of the button is. The button however have a class, but there are multiple buttons. When I click on one of the buttons, all buttons fire their event because they all have the same class.

is there a way that I can make it that only one button fire the event? Here is my code:

    <button class="delad" name="<?php print $user; ?>">Delete this ad? </button>

<script>
$(document).ready(function()
{
    count = 0;
    if(count == 0)
    $(".delad").click(function(e)
    {
        e.stopPropagation() 
        v1 =$(this).attr('name');
        sum = {'v1': v1};
        sum = JSON.stringify(sum);

        $.ajax(
                {
                    url: 'del_ad.php',
                     data: 'json='+ sum,
                    success: function(data) 
                    {
                        alert(data)
                    }
                });
                count += 1;

    });

});

</script>

Answer 1

Try the following:

<button id="dino" class="delad" name="<?php print $user; ?>">Delete this ad? </button>
<script>
$(document).ready(function()
{
count = 0;
if(count == 0)
$("#dino").click(function(e)
{
    e.stopPropagation() 
    v1 =$(this).attr('name');
    sum = {'v1': v1};
    sum = JSON.stringify(sum);

    $.ajax(
            {
                url: 'del_ad.php',
                 data: 'json='+ sum,
                success: function(data) 
                {
                    alert(data)
                }
            });
            count += 1;

});

});

Answer 2

You can determine which button that was clicked by using 'this', with 'this' you can access the attribute of the html object.

$(document).ready(function(){
    $("input[class='my_class']").click(function(){ //get all button with the class of 'myclass'
        alert($(this).attr('name')); //'this' determines which button was clicked
        //ajax call
    });
});

Please see this example :) http://jsfiddle.net/silkherb/o7qpehwg/2/

Answer 3

I dont know if this would be practical or not but that would depend on how many buttons you have.

As you can see in the code below you would test to see which button was clicked and then apply the function approriate to it.

I think this will work for you going by the information you gave even though i am assuming the location of the button on the page will be appropriate to a certain function regardless of the name it has.

$(".delad").on("click", function(){
    var btnName = $(this).attr("name");
    if($(btnName) == <?php echo $nameOfButton1;?>){

        //do something thats specific 
        //to the button with this name

    }else if($(btnName) == <?php echo $nameOfButton2;?>){

        //do something thats specific 
        //to the button with this name

    }else if($(btnName) == <?php echo $nameOfButton3;?>){

        //do something thats specific 
        //to the button with this name
    }
});

Hope this helps

Answer 4

Well this has happened to me and the problem was the script was called multiple times (in a loop)!

Just putting this out there just in case someone has the same problem.