Question

这是我的HTML：

<td>
 <a href="alias.php?Id=97113&amp;redir=index" class="" atip="">aaaa</a>&nbsp;&nbsp;<b>(97113)</b>
</td>

这是我的JS：

var row_Value  = '';
var row_ValueTmp = '';
var aHref = '';
var aClass = '';
var aTip = '';
var manufactererIdAndAliasHtml = '';
$("#batchform tbody tr td:nth-child(3)").dblclick(function(e){
    e.preventDefault();
    aHref = $(this).find('a').attr('href');
    aClass = $(this).find('a').attr('class') || '';
    aTip = $(this).find('a').attr('atip') || '';
    row_Value  = $(this).find('a').text().replace(/"/g, "&quot;");

    row_ValueTmp = '<div><input type="text" name="tempName" id="tempName" value="'
                    + row_Value + '" style="width:90%">'
                    + '</div><div id="row_msg"></div>';
    $(this).find('a').remove();
    manufactererIdAndAliasHtml = $(this).html();

    $(this).prepend(row_ValueTmp);
    $("#tempName").focus().blur(function(){
        var manuId = $(this).parent().parent().find('b').text();
        manuId = parseInt( manuId.replace('(','').replace(')','').trim() );
        // console.log( manuId );

        var msgLayer  = document.getElementById("row_msg");
        msgLayer.innerHTML = '<font color= "green"><?=$this->GetTranslation("Please wait...");?></font>';
        $.ajax({
            type: "POST",
            url: "ajaxupdate.php",
            data:{ tempName: $(this).val(), id: manuId },
            dataType: "json",
            success: function(re)
            {
                if(re.message != 'Success'){
                    msgLayer.innerHTML = '<font color="red">' + re.message + '</font>';
                }

                $("#tempName").parent().parent().html(
                    '<a atip="' + aTip + '" class="' + aClass + '" href="' + aHref + '">'
                    + $("#tempName").val() + '</a>'
                    + manufactererIdAndAliasHtml);
                return false;
            }
        });
    });
});

$("#batchform tbody tr td:nth-child(3)").click(function(e){
    row_Value = $("#tempName").val();
    $("#tempName").parent().parent().html( '<a atip="' + aTip + '" class="' + aClass + '" href="' + aHref + '">' + row_Value + '</a>'
        + manufactererIdAndAliasHtml);

});

现在它有问题，当我在input元素中单击鼠标时，click事件将被触发，我希望它不会被触发。因为我不希望在点击input时更改编辑状态。

以下是我尝试过但没有工作的事情：

$("#batchform tbody tr td:nth-child(3):not(:has(input))").click(function(){
  console.log('still fired');
});

$("#batchform tbody tr td:nth-child(3)").live('filter', function() { 
    return $(this).children('input').length == 0;  
}).click(function(){
  console.log('still fired');
});

Answer 1

e.stopPropagation();可以帮到你..

可以在e.preventDefault();

之后插入

这将防止事件在DOM树中冒泡。

可在Jquery API

找到其他信息

Answer 2

您可能需要：

    e.stopImmediatePropagation();

它应该停止点击td元素上的点击。

描述：保持其余处理程序不被执行，并防止事件冒泡DOM树。

Answer 3

$("#batchform tbody tr td:nth-child(3)").off("click").on("click",function(e){
    row_Value = $("#tempName").val();
    $("#tempName").parent().parent().html( '<a atip="' + aTip + '" class="' + aClass + '" href="' + aHref + '">' + row_Value + '</a>'  + manufactererIdAndAliasHtml);

});

试试这段代码。

jQuery在click事件中排除子元素

3 个答案: