Question

由于某种原因，下面的代码只会触发所选第一个删除按钮的弹出框。所有其他按钮什么都不做。如何修改它，以便无论单击哪一行，此按钮都会调用脚本。

<a class="btn btn-danger" id="delete">Delete</a>

这是我的html

@foreach(Tweet::orderBy('created_at', 'DESC')->get() as $tweet)
                    <tr id="{{$tweet->tweet_id}}">
                        <td><a class="btn btn-danger" id="delete">Delete</a></td>
                        <td id="tweet_text">{{$tweet->tweet_text}}</td>
                        <td id="tweet_user">{{$tweet->screen_name}}</td>
                        <td>{{$tweet->name}}</td>
                        <td id="tweet_date">{{$tweet->created_at}}</td>
                    </tr>
@endforeach

这是我的脚本＆＃39;

<script>
    //When the delete button is clicked open the pop up.
    $('#delete').click(function(){
        $('#myModal').modal({show:true});
        //Get the clicked row
        var row = $(this).closest('tr');
        //Get the ID of the Tweet - the row id
        var tid = row.attr('id');
        //Get the tweet, user and date
        var tweet = row.find('#tweet_text');
        var user = row.find('#tweet_user');
        var date = row.find('#tweet_date');
        //Display details in the pop up
        $('.modal_tweet_text').text(tweet.text());
        $('.modal_tweet_user').text(user.text());
        $('.modal_tweet_date').text(date.text());
        $('.modal_tweet_id').text("Tweet ID: " + tid);
        //Confirm Action 
        $('#confirm_btn').click(function(){
            row.remove();//remove the row
            $('#myModal').modal('hide');//Hide the popup
        });
    });
</script>

Answer 1

您不能对多个按钮使用相同的ID，因此请将其更改为类

<a class="btn btn-danger delete">Delete</a>

并使用类选择器

绑定click事件

$('a.delete').click(function(){
        $('#myModal').modal({show:true});
        //Get the clicked row
        var row = $(this).closest('tr');
        //Get the ID of the Tweet - the row id
        var tid = row.attr('id');
        //Get the tweet, user and date
        var tweet = row.find('#tweet_text');
        var user = row.find('#tweet_user');
        var date = row.find('#tweet_date');
        //Display details in the pop up
        $('.modal_tweet_text').text(tweet.text());
        $('.modal_tweet_user').text(user.text());
        $('.modal_tweet_date').text(date.text());
        $('.modal_tweet_id').text("Tweet ID: " + tid);
        //Confirm Action 
        $('#confirm_btn').click(function(){
            row.remove();//remove the row
            $('#myModal').modal('hide');//Hide the popup
        });
    });

Answer 2

使用事件委托，按钮不再存在，一旦删除它。

$(document).on('click','#delete',function(){

jquery单击侦听器仅在表的第一行上工作

2 个答案: