javascript - html 是否在同一个对象上使用相同的 id

Question

我有一个内置的 html 代码，每个部分都有一个带有唯一 id 的按钮，每个按钮都有一个事件，如果我显示主 html，每个按钮都有效，如果我显示该 html 的一部分，则按钮不会工作

我需要为 html 的每个部分的每个按钮创建不同的 id 吗？

 if(otcs[i].clase[j].valor==1)                                  
     {
      htmlOtsSistemasCCTV +='  <br><li class="search-result-block" data-id="14"/> <div class="search-result-block"><div class="image-block hover-fader"><img src="'
          +otcs[i].clase[j].servicio[k].ser_img_32
          +'"  alt="image01" />   </div>  <div class="url text-green"><strong>  OTC 2015-'
          +otcs[i].clase[j].servicio[k].valor
          +'  </strong> </div> <p class="desc">'
          +otcs[i].clase[j].servicio[k].texto
          +'</p> <div class="btn-group">  <div class="btn-group btn-group-xs "><button type="button" class="btn btn-primary" id="'
          +i+"-"+j+"-"+k
          +'" > <span class="glyphicon glyphicon-play"></span> PROCESO</button></div> <div class="btn-group btn-group-xs"> <button  type="button" class="btn btn-warning" onClick="pausarServicio()" id="pausarOtc'
          +otcs[i].clase[j].servicio[k].valor
          +'"> <span class="glyphicon glyphicon-pause"></span>    TRASLADO</button> </div> <div class="btn-group btn-group-xs"> <button type="button" onClick="confirmarTerminado(\'#1290\')" class="btn btn-success" id="confirmarOtc'
          +otcs[i].clase[j].servicio[k].valor
          +'">       <span class="glyphicon glyphicon-stop"></span> TERMINAR</button>     </div>  <div class="btn-group btn-group-xs"> <button type="button" onClick="reprogramarServicio()" class="btn btn-danger" id="reprogramar'
          +otcs[i].clase[j].servicio[k].valor+'" > <span class="glyphicon glyphicon-fast-backward"></span> REPROGRAMAR</button> </div> <div class="btn-group btn-group-xs"> <button type="button" onClick="confirmarFalla()" class="btn btn-info" id="confirmaFalla'
          +otcs[i].clase[j].servicio[k].valor
          +'" > <span class="glyphicon glyphicon-wrench"></span> DIAGNOSTICO </button> </div>                  </div>                 </div>               </li>' ; 

                                                }

然后...

 htmlOtsSistemas = htmlOtsSistemasCCTV + htmlOtsSistemasSSCA ......

然后...

 $('#Sistemas').on('click',function(){  "soo the button here work"

                                $('#lista2').html(htmlOtsSistemas);

             });

                            $('#CCTV').on('click',function(){ " the buttons here do not work

                                  $('#lista2').html(htmlOtsSistemasCCTV);

                                });

Answer 1

如果您在同一页面上使用多个按钮，则所有ID必须是唯一的。 ID 不能在元素之间共享。如果您需要对一组特定的元素进行分组，请使用 class 而不是 id。

您还可以选择生成动态ID!