Question

编辑固定和工作： Jquery和bootstrap不允许相同的ID - 请参阅下面的新UI和Jquery代码：

以前尝试按照最新安全实践的建议将onclick事件与UI完全分开。在Jquery和Javascript中使用重复ID会为onclick事件创建糟糕的mojo，即使使用＆＃39;这个＆＃39; - 改为在Twitter引导程序类后面使用链式类（空类），并将onclick绑定到新的自定义类。这消除了在线点击事件。

更新的UI代码：

//Grid Row 1 with record info preceeding
<td>
<button type='button' class='btn btn-default btn-xs cust_delete' id='btn_delete_record_1' name='btn_delete_record_1' value="X38-721" data-toggle='modal' data-target='#DeleteRecordModal'>
<span class='glyphicon glyphicon-trash'></span>
</button>
</td>

//Grid Row 2 with record info preceeding
<td>
<button type='button' class='btn btn-default btn-xs cust_delete' id='btn_delete_record_2' name='btn_delete_record_2' value="X34-7245" data-toggle='modal' data-target='#DeleteRecordModal'>
<span class='glyphicon glyphicon-trash'></span>
</button>
</td>

JQUERY -

 $( document ).ready(function() {
   $('.cust_view').click(function() { 
        var myRecord = $(this).attr('value');
        $("#view_record_id").val(myRecord);
        $('form#frm_view_record').submit();
    }); 
    $('.cust_delete').click(function() { 
        var myRecord = $(this).attr('value');
        $('#delete_record_id').val(myRecord);
    }); 
});

Answer 1

使用document.querySelectorAll()循环显示名称为“button”和addEventListener() s的按钮的所有出现。按钮可以具有不同的值，但它仅检查名称：

var linkListener = document.querySelectorAll("button[name='button']");

for (i=0;i<linkListener.length;i++){
  linkListener[i].addEventListener("click", linkFunction);
  }

function linkFunction(){
  
  alert("You clicked a button with a \"name\" of \"button\".");
  
  }

<button name="button">A button</button><button name="button">A button</button><button name="button">A button</button><button name="button">A button</button><button name="button">A button</button><button name="button">A button</button><button name="button">A button</button><br/><br/>

<button name="button1">A button</button><button name="button2">A button</button><button name="button3">A button</button><button name="button4">A button</button><button name="button5">A button</button><button name="button6">A button</button><button name="button7">A button</button>

事件监听器，用于在同一个名称但值不同的多个按钮上单击事件

1 个答案: