当我触发这个jquery事件时，表的另一行中的其他元素也被触发了，这是我想要防止的

when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent

本文关键字：元素 其他 我想要 一行 事件 jquery      更新时间：2023-09-26

当我触发这个jquery事件时，表的另一行中的其他元素也被触发了，我想阻止

$(document).ready(function(){
                $(".Trigger_modi").delegate("a", "click",function(e){
                    e.stopPropagation();
                    var tnp = $(this).attr('id');
                    window.alert("tnp: "+tnp);
                    document.getElementById('modi_i').value=tnp;
                    $('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+'  onclick="modiTest.jsp">');  

                    $('.inner_element_1').html('<input type="text" name="subject" value="">');

                    $('.inner_element_2').html('<h2 > yahoo</h2>');
                    $('.inner_element_3').html('<h2>yahoo</h2>');
                    $('.inner_element_4').html('<h2>yahoo</h2>');
                    $('.inner_element_5').html('<h2>yahoo</h2>');
                    var t = document.getElementById('modi_i').value
                    window.alert("t: "+t);
                    event.stopImmediatePropagation();
                });
            });

这是一个jquery函数，如果我点击"a"标签就会触发它。

和这会使表看起来像这样↓↓↓↓↓↓↓↓

这是正在发生的事情的描述

 <div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">수정</a></div></div>

这个html代码被for循环包裹着，我怀疑这可能是我遇到问题的原因

有人建议我试试吗？

   <a class="Trigger" id="<%=idx %>"> <%=subject %></a>
       <div class="Slider slideup">
       <div id="Actual"><!-- 누르면 본문내용 보게됨. -->
               </form>
      <jsp:useBean id="bdao" class="Bob.Community.CommunityDAO" scope="session"></jsp:useBean>
      <jsp:useBean id="bdto" class="Bob.Community.CommunityDTO"></jsp:useBean>

            <div class="inner_element_1"><%=content %></div>

       <div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">Modify</a></div></div>
            <div class="">
            <div id="Actual_modi">

            </div>
         </div>

         <div class="inner_element_3"><a href="noticeDelete.jsp?i=<%=i %>">Delete</a></div>   
         <div class="inner_element_4"></div>   
         <div class="inner_element_5"></div>   

             </div>
       </div>

**

编辑1(它有效，感谢您的所有评论，回复

**

我最初怀疑问题是由for循环引起的，结果证明是对的。[假设循环5次。]当for循环完成并且在javascript函数触发器中，the inner_element_(number)-->所有25个元素(对于循环5次*5个元素(对于每个数量的元素都设置为相同的html标记。我把它改成类似<div class="inner_element_<%=idx%>">的东西，这使得25元素可以单独具有不同的类值。而且效果很好。感谢

**

编辑2(我所做的一切都是为了让它完全正常工作：原来是诚信问题

**

  1. <div class="inner_element_(number)至<div class="inner_element_<%=idx %>

  2. $('.inner_element_(number)')至$('.inner_element_'+tnp)

  3. 并且我删除e.stopPropagation(); event.stopImmediatePropagation();

  4. 并且我将CCD_ 8改变为CCD_
$('.inner_element_1').html('<input type="text" name="subject" value="">');

$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value

在上面的代码中，您将html分配给所有.inner_element_1、.inner_element_2、.inner_element_3、.inner_element_4和.inner_element_5，其中jQuery看起来都是整个页面的类inner_element_[1-5]的元素。因此，它可能不会引发另一个行事件，在这种情况下，它可能只是一个HTML绑定逻辑错误。

试着修改你的函数如下：

$(".Trigger_modi").each(function () {
    var $Trigger_modi = $(this);
    $Trigger_modi.delegate("a", "click",function(e){
        e.stopPropagation();
        var tnp = $(this).attr('id');
        window.alert("tnp: "+tnp);
        document.getElementById('modi_i').value=tnp;
        $('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+'  onclick="modiTest.jsp">');  

        $Trigger_modi.find('.inner_element_1').html('<input type="text" name="subject" value="">');
        $Trigger_modi.find('.inner_element_2').html('<h2 > yahoo</h2>');
        $Trigger_modi.find('.inner_element_3').html('<h2>yahoo</h2>');
        $Trigger_modi.find('.inner_element_4').html('<h2>yahoo</h2>');
        $Trigger_modi.find('.inner_element_5').html('<h2>yahoo</h2>');
        var t = document.getElementById('modi_i').value
        window.alert("t: "+t);
        event.stopImmediatePropagation();    
});

编辑1-

请将以上代码包装在$(document).ready()中，并将前3行修改如下：

$(".Trigger_modi").each(function () {
        var $Trigger_modi = $(this);
        $Trigger_modi.find("a").on("click", function(e){
    ....

编辑2-

在查看了noticeList.jsp之后，我认为您必须修改for循环中包含id属性的所有元素，因为在HTML中不允许包含两个(或更多(共享相同id的元素。

此外，由于您是通过for(int i= (n-1) ;i<=(n-1)+x;i++)循环的，因此在HTML中不允许只在id属性中使用数字，因此您还必须按如下方式修改a元素：<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>" data-id="<%=i %>">Modify</a></div>

之后，您可以为td指定一个类名，如下所示：

<td class="TriggerCell">
<form name=f>

并将编辑1中的代码修改如下：

$(".TriggerCell").each(function () {
        var $TriggerCell = $(this);
        $TriggerCell.find(".Trigger_modi a").on("click", function(e){
            var tnp = $(this).attr("data-id");
    ....

尝试以下

$(document).ready(function(){
                $(".Trigger_modi").on("click","a",function(e){
                    e.stopPropagation();
                    var tnp = $(this).attr('id');
                    window.alert("tnp: "+tnp);
                    document.getElementById('modi_i').value=tnp;
                    $('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+'  onclick="modiTest.jsp">');  

                    $(this).parent().find('.inner_element_1').html('<input type="text" name="subject" value="">');

                    $(this).parent().find('.inner_element_2').html('<h2 > yahoo</h2>');
                    $(this).parent().find('.inner_element_3').html('<h2>yahoo</h2>');
                    $(this).parent().find('.inner_element_4').html('<h2>yahoo</h2>');
                    $(this).parent().find('.inner_element_5').html('<h2>yahoo</h2>');
                    var t = document.getElementById('modi_i').value
                    window.alert("t: "+t);
                    event.stopImmediatePropagation();
                });
            });
相关文章：