Bootstrap 如果单击“停止传播”按钮父行,则单击

rjzwgtxy  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(1)|浏览(214)

我的问题是当我点击我的按钮时,它不会出现我的按钮点击,它会出现我的行点击(折叠事件)。
我这里有两个按钮,一个是用于打开模态,另一个有onclick事件,但它不工作。它是打开行折叠事件。
我的模态打开按钮是Cevapla。Sil按钮正在删除消息,但它只是折叠行下的面板

下面是我的html:

<tr class='accordion-toggle'  onclick='UpdateIsRead(this);' style='cursor:pointer;background-color:{6}' data-toggle='collapse' data-target='#gelenRow{0}' data-isread='{5}'>
   <td class='email-title'>{1}
   </td>
   <td class='email-body'>{2}
   </td>
   <td>{3}
   </td>
   <td>
      <a class='modalButton btn btn-info btn-xs' data-height='550' title='Cevap Yaz' data-src='{7}apps/pages/PrivateMessage.aspx?topic={8}&toWho={9}' data-title='Cevap Yaz' data-headericoncolor='#000000' data-headercolor='#000000' data-icon='fa fa-envelope' data-toggle='modal' style='cursor: pointer' data-target='#popup' style='height:28px'><span class='fa fa-edit'></span> Cevapla</a>            
      <a style='height:28px' onclick='DeleteMessage();'  title='Sil'  class='btn btn-danger btn-xs'><span class='fa fa-remove'></span> Sil</a>
   </td>
</tr>
<tr id='gelenRow{0}' class='collapse' style='background-color:#F5F5F5'>
   <td colspan='6'>
      <div class='panel-footer' style='padding: 10px 35px;'>
         <div class='row'>
            <div id='filter-panel' class='filter-panel'>
               <div class='panel panel-default'>
                  <div class='panel-body'>
                     {4}
                  </div>
               </div>
            </div>
            <button type='button' class='btn btn-sm btn-primary' >Cevap Yaz</button>
         </div>
      </div>
   </td>
</tr>

我试着用这个代码:

$(document).on("click","tr", function(e){
    if (e.target.nodeName == "A" || e.target.nodeName == "SPAN") {
        e.parent().stopPropagation();
    }
});

$(document).on("click","tr", function(e){
    if (e.target.nodeName == "A" || e.target.nodeName == "SPAN") {
        e.stopPropagation();
    }
});
y53ybaqx

y53ybaqx1#

Because your DeleteMessage & UpdateIsRead functions are inline in the HTML you can consider to pass the current element and event:

<tr class='accordion-toggle'  onclick='UpdateIsRead(this, event);'

In this way you can add a test in your functions to stop propagation or action.
The event handlers order, clicking on DeleteMessage button is:

  • DeleteMessage
  • UpdateIsRead
  • $(document).on("click", "tr",...
function UpdateIsRead(ele, e) {
    console.log('UpdateIsRead');
    if (e.target.nodeName == "A" || e.target.nodeName == "SPAN") {
        //e.stopPropagation();
    }
}
function DeleteMessage(ele, e) {
    console.log('DeleteMessage');
    if (e.target.nodeName == "A" || e.target.nodeName == "SPAN") {
        //e.stopPropagation();
    }
}
$(document).on("click", "tr", function(e){
    console.log('$(document).on("click", "tr"...');
    if (e.target.nodeName == "A" || e.target.nodeName == "SPAN") {
        e.stopPropagation();
    }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<table class="table table-striped">
    <tbody>
    <tr class='accordion-toggle'  onclick='UpdateIsRead(this, event);' style='cursor:pointer;background-color:{6}' data-toggle='collapse' data-target='#gelenRow0' data-isread='{5}'>
        <td class='email-title'>{1}
        </td>
        <td class='email-body'>{2}
        </td>
        <td>{3}
        </td>
        <td>
            <a class='modalButton btn btn-info btn-xs' data-height='550' title='Cevap Yaz' data-src='{7}apps/pages/PrivateMessage.aspx?topic={8}&toWho={9}' data-title='Cevap Yaz' data-headericoncolor='#000000' data-headercolor='#000000' data-icon='fa fa-envelope' data-toggle='modal' style='cursor: pointer' data-target='#popup' style='height:28px'><span class='fa fa-edit'></span> Cevapla</a>
            <a style='height:28px' onclick='DeleteMessage(this, event);'  title='Sil'  class='btn btn-danger btn-xs'><span class='fa fa-remove'></span> Sil</a>
        </td>
    </tr>
    <tr id='gelenRow0' class='collapse' style='background-color:#F5F5F5'>
        <td colspan='6'>
            <div class='panel-footer' style='padding: 10px 35px;'>
                <div class='row'>
                    <div id='filter-panel' class='filter-panel'>
                        <div class='panel panel-default'>
                            <div class='panel-body'>
                                {4}
                            </div>
                        </div>
                    </div>
                    <button type='button' class='btn btn-sm btn-primary' >Cevap Yaz</button>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
</table>

相关问题