jQuery在click事件中排除子元素

jQuery exclude child element in click event

本文关键字:排除 元素 事件 click jQuery      更新时间:2023-09-26

这是我的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');
});

e.stopPropagation();可以帮你搞定。。

可以插入e.preventDefault(); 之后

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

其他信息可以在Jquery API 中找到

您可能需要:

    e.stopImmediatePropagation();

它应该可以阻止点击触发td元素。

描述:阻止其余处理程序执行,并防止事件在DOM树中冒泡。

$("#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);
});

试试这个代码片段。