在文档上使用jquery添加click事件跟踪器时，链接上的click事件不起作用

Question

我有一个文件列表，可以选择删除该文件。所以点击删除时会要求确认。单击确认时，文件将被删除。 请检查这个jsfiddle

  

https://jsfiddle.net/d6ds7qL2/1/

当我添加html点击处理程序以便将确认文本更改为原始删除文本时，

$('html').click(function(event){
     if($('.confirmDelete').is(':visible')){
         $('.confirmDelete').hide();
         $('.deleteLink').show();
         return false;
     }
});
$('.confirmDelete').hide();
$('.deleteLink').click(function (event) {
    $(this).hide();
    $('.confirmDelete').filter(':visible').each(function () {
        $(this).hide();
        $(this).prev('.deleteLink').show();
    });
    $(this).next('.confirmDelete').show();
    event.stopPropagation();
    return false;
});

     

https://jsfiddle.net/d6ds7qL2/2/

但现在的问题是点击“确认＆＃39;文本它不会href但隐藏确认文本并显示删除文本。

Answer 1

尝试代替html，document。

$(document).not(".confirmDelete").click(function(event){
    if($('.confirmDelete').is(':visible')){
        $('.confirmDelete').hide();
        $('.deleteLink').show();
        return false;
    }
});
$('.confirmDelete').hide();
$('.deleteLink').click(function (event) {
    $(this).hide();
    $('.confirmDelete').filter(':visible').each(function () {
        $(this).hide();
        $(this).prev('.deleteLink').show();
    });
    $(this).next('.confirmDelete').show();
    event.stopPropagation();
    return false;
});

小提琴：https://jsfiddle.net/945j4g0x/

Answer 2

我能够更新脚本，现在正在按预期工作

＆＃13;

＆＃13;

$('html').click(function(e){
    var target = $(e.target);
    if(!target.hasClass('confirmDelete')){
        if($('.confirmDelete').is(':visible')){
            $('.confirmDelete').hide();
            $('.deleteLink').show();
            return false;
        }
    }
});
$('.confirmDelete').hide();
$('.deleteLink').click(function (event) {
    $(this).hide();
    $('.confirmDelete').filter(':visible').each(function () {
        $(this).hide();
        $(this).prev('.deleteLink').show();
    });
    $(this).next('.confirmDelete').show();
    event.stopPropagation();
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table width="100%">
    <tr>
        <td width="60%">file name 1</td>
        <td width="40%">
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="delete.html?file=1">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 2</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="delete.html?file=2">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 3</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=3">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 4</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=4">Confirm?</a>
        </td>
    </tr>
    <tr>
        <td>file name 5</td>
        <td>
            <a class="deleteLink" href="#">Del</a>
            <a style="display:none;" class="confirmDelete" href="http://google.com?file=5">Confirm?</a>
        </td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;