Question

我有一个php文件，其中包含来自数据库的新闻列表。

在每条新闻中，我都有一个删除它的链接，如下所示：

echo '<a id="'.$result_news['id_news'].'" class="j_newsdelete" href="#">Delete</a>';

然后我有我的jQuery和AJAX来获取我的新闻ID并删除我的新闻。

但是，如果用户在我提供的对话框模式中点击“是”，我的新闻就会被删除。

<div class="delete_dialog">
    <div class="confirm">
        <p></p>
        <a href="#" id="delete">Yes</a>
        <a href="#" id="no">No</a>
    </div>
</div>

当我删除每条新闻时，我的删除工作正常，但是......我在这里遇到了问题。

问题我有：

当我点击“删除”时，会出现对话框确认

但如果我在那一刻点击“否”，新闻就不会被删除（所以工作正常），我的确认对话框已经关闭......

但是在下一刻如果我点击其他新闻中的“删除”并在我的对话框确认中点击“是”，此新闻将被删除，但我之前单击“否”的新闻也会被删除。

请你帮我一下，试着了解这里发生了什么？

我的jQuery＆amp; Ajax的

$('.content').on('click','.j_newsdelete',function(){
    var news_id = $(this).attr('id');
    $('.content .news li[id="'+ news_id +'"]').css('background','red');
    $('.delete_dialog p').text('Are you sure you want to remove this news?');
    $('.delete_dialog').fadeIn("slow",function(){
        $('.confirm').fadeIn("slow");
    });
    $("a#no").click(function(event){
        event.preventDefault();
        $('.confirm').fadeOut("slow",function(){
            $('.delete_dialog').fadeOut("slow"); 
        });
        $('.content .news li[id="'+ news_id +'"]').css('background','#f5f5f5');
    });
    $("a#delete").click(function(event){
        event.preventDefault();
        $.post(url,{action:'news_del',id: news_id},function(){
            window.setTimeout(function(){
                $('.content .news li[id="'+ news_id +'"]').fadeOut("slow");
        },500);
        $('.confirm').fadeOut("fast",function(){
            $('.delete_dialog').fadeOut("fast"); 
        });
    });
});
return false;
})

Answer 1

将事件绑定在外部并将变量放在外面。

var news_id = null;

$("a#no").click(function(event){
    event.preventDefault();
    $('.confirm').fadeOut("slow",function(){
        $('.delete_dialog').fadeOut("slow"); 
    });
    $('.content .news li[id="'+ news_id +'"]').css('background','#f5f5f5');
    news_id = null;
});
$("a#delete").click(function(event){
    event.preventDefault();
    if (!news_id) return;
    $.post(url,{action:'news_del',id: news_id},function(){
        window.setTimeout(function(){
            $('.content .news li[id="'+ news_id +'"]').fadeOut("slow");
        },500);
        $('.confirm').fadeOut("fast",function(){
            $('.delete_dialog').fadeOut("fast"); 
        });
    });
});

$('.content').on('click','.j_newsdelete',function(){
    news_id = $(this).attr('id');
    $('.content .news li[id="'+ news_id +'"]').css('background','red');
    $('.delete_dialog p').text('Are you sure you want to remove this news?');
    $('.delete_dialog').fadeIn("slow",function(){
        $('.confirm').fadeIn("slow");
    });
    return false;
});

Answer 2

确实，您的问题是由于您在其他事件处理程序中分配事件处理程序，特别是每次单击原始删除按钮时都绑定是/否单击处理程序。

基本上：

$('.content').on('click','.j_newsdelete',function(){
    ...
    $("a#no").click(function(event){
    ...
    });
    $("a#delete").click(function(event){
    ...
    });
 });

要更好地证明问题，请参阅：http://jsfiddle.net/6p8mx7nd/

可能的解决方案是对点击的新闻项ID使用全局变量：http://jsfiddle.net/6p8mx7nd/1/

我只是想每次删除一条新闻，但我删除的不止一条

2 个答案: