【问题标题】:On row click , prevent to redirect when clicking on the button单击行时,防止单击按钮时重定向
【发布时间】:2017-09-29 10:01:14
【问题描述】:

这里我使用的是数据表 行点击我想做的事[重定向], 在一行中,其中一列有一个按钮,并且有一些动作。

问题:当我单击按钮执行获取行单击的操作时,希望在单击按钮时阻止行单击

代码

$('#example').click(function () {
  var dataArr;
  var rows = $('tr.selected');
  var rowData = table.rows(rows).data();
  $.each($(rowData), function (key, value) {
    dataArr = value["id"];
    window.location = 'clients?id=' + dataArr;
  });
}

我应该改变什么?谢谢

编辑:

按钮:

    $(document)
        .ready(
            function() {
                var table = $('#example')
                    .DataTable({
                        "sAjaxSource": "/clients",
                        "sAjaxDataProp": "",
                        "order": [
                            [0, "asc"]
                        ],

                        "aoColumns": [{
                                "mData": "id"
                            },
                            {
                                "mData": "name"
                            },
                            {
                                "mData": "lastName"
                            },

                            {
                                "mData": null,
                                defaultContent:'<p>1</p>'
                            },


                            {
                                "mData": null,
                                className: "center",
                                defaultContent: '<a href="clients.html"> <p title="New"><button class="btn btn-primary btn-xs newButton" data-title="Add"  id="btn"><span class="glyphicon glyphicon-plus"></span></button></p></a>'
                            },
                            {
                                "mData": null,
                                className: "center",
                                defaultContent: '<p data-placement="top" data-toggle="tooltip" title="Edit "><button class="btn btn-default btn-xs data-title="edit" data-toggle="modal" data-target="#edit""><span class="glyphicon glyphicon-pencil"></span></button></p>'
                            },
                            {
                                "mData": null,
                                className: "center",
                                defaultContent: '   <p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete"><span class="glyphicon glyphicon-trash"></span></button></p>'
                            }

                        ]

                    });

我正在使用数据表。并且只需要编辑和删除的最后两列

【问题讨论】:

  • 你能在sn-p中重现这个问题吗?
  • 按钮,是a标签还是&lt;button&gt;
  • 您需要向我们展示您的标记/生成标记。
  • 我编辑了我的问题,谢谢!

标签: javascript jquery


【解决方案1】:

每当子事件调用父事件时,这里可以防止使用下面的方法。

event.stopPropagation();

【讨论】:

    【解决方案2】:

    尝试使用event.stopPropagation();

    代码将类似于:

    $(".table_row"/*the table row class*/).on('click', 'button', function () {
             //button action 
         }).on('click', $(this).parent().parent().parent() , function (e) {
             e.stopPropagation();
         });/* if  $(this).parent().parent().parent() doesn't work ,search in developer tools to see where click action is triggered ,on the */
    

    类似

    我试着做一些我不知道你是否喜欢的东西,但它会按照你想要的方式工作this(更新)。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-01-23
      • 2012-05-07
      • 2012-11-24
      • 1970-01-01
      • 2020-05-31
      • 2019-04-21
      相关资源
      最近更新 更多