Блог

Главная - Вопросы по программированию - jQuery исключает дочерний элемент в событии щелчка

jQuery исключает дочерний элемент в событии щелчка

#javascript #jquery

#javascript #jquery

Вопрос:

Вот мой HTML:

 <td>
 <a href="alias.php?Id=97113amp;amp;redir=index" class="" atip="">aaaa</a>amp;nbsp;amp;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, "amp;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');
});

Комментарии:

1. На всякий случай, если есть такое свойство, как e.target в объекте Event.

Ответ №1:

e.stopPropagation(); может сделать это за вас..

может быть вставлен после e.preventDefault();

это предотвратит появление события в дереве DOM.

дополнительную информацию можно найти в Jquery API

Комментарии:

1. @Phoenix можете ли вы опубликовать скрипку?

Ответ №2:

Вам, вероятно, нужно:

     e.stopImmediatePropagation();

Это должно остановить запуск щелчка по элементу td.

Описание: Предотвращает выполнение остальных обработчиков и предотвращает появление события в дереве DOM.

Комментарии:

1. Я думаю, это правильно, но я просто не могу заставить это работать, на самом деле, я попытался сделать это другим глупым способом и решил это. Спасибо.

Ответ №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);

});

попробуйте этот фрагмент кода.

Метки: