Question

我一直在努力让这个与jQuery的innerhtml一起工作，虽然有些人告诉我不建议使用它，它只是一小部分页面所以我不认为它会影响网站速度等等

以下是我一直在使用的片段：

$('input[name|="yesno1"]').change(function () {

    if ($(this).val() == 'YES') {
        $("#div1").hide();
        $("#div2").show();

    } else {

        $("#div2").hide();
        $("#div1").show();
    }
});

代码：

function replace3() {
    document.getElementById('number').innerHTML = "<b>3. </b>";
    document.getElementById('question').innerHTML = "<b>Would You Like To Try It? </b>";
    document.getElementById('answer1').innerHTML = "<input type=\"radio\" name=\"yesno1\" id=\"dl\" value=\"YES\" /> Yes";
    document.getElementById('answer2').innerHTML = "<input type=\"radio\" name=\"yesno1\" id=\"dl\" value=\"NO\" /> No";
    document.getElementById('nextbutton').innerHTML = "<div id=\"div1\">Default Link</div> <div id=\"div2\">No Answer Link</div>";    
}

我尝试使用不同的链接设置单选按钮是/否，我尝试在标准的html页面上使用上面的内容并且它可以正常工作，但是当它在 innerHTML 标签中使用时失败了

Answer 1

尝试将事件委派与on（jq 1.7+）或live（较旧）一起用于替换为innerHTML的元素，或者在替换事件后绑定事件。好像你在事件存在于DOM之前绑定事件或者你再次替换事件导致事件在它们上面丢失。

 $(document).on('change', 'input[name|="yesno1"]', function() { // Use the common container instead of document.
    if(this.value =='YES') {     
       $("#div1").hide();
       $("#div2").show();       

    } else {

       $("#div2").hide();
       $("#div1").show();
    }
 });

也可能你可以将它降低到

$(document).on('change', 'input[name|="yesno1"]', function() { // Use the common container instead of document.

   $("#div1, #div2").toggle(); // provided you show1 and hide one at the startup, with the default radio checked.

 });

如果你想做jquery方式

function replace3() {
    $('#number').html("<b>3. </b>");
    $('#question').html("<b>Would You Like To Try It? </b>");
   // ....
}

<强> event-delegation

Answer 2

您的选择：

（推荐）您可以在父元素上绑定click事件on。这是最好的方法，因为不管父项中input的数量是多少，click总是附加到父项，这使得它干燥且性能更高。

$("Parent of input").on('click', 'input[name|="yesno1"]', function(){
    if ($(this).val() == 'YES') {
      $("#div1").hide();
      $("#div2").show();
    } else {
      $("#div2").hide();
      $("#div1").show();
   }
});

您可以将$('input[name|="yesno1"]')作为选择器的事件处理程序放在replace3()方法中的最后一个语句中。那时你的input元素将在DOM中，因此你可以将click处理程序绑定到元素。

  function replace3() {
      document.getElementById('number').innerHTML = "<b>3. </b>";
      document.getElementById('question').innerHTML = "<b>Would You Like To Try It? </b>";
      document.getElementById('answer1').innerHTML = "<input type=\"radio\" name=\"yesno1\" id=\"dl\" value=\"YES\" /> Yes";
      document.getElementById('answer2').innerHTML = "<input type=\"radio\" name=\"yesno1\" id=\"dl\" value=\"NO\" /> No";
      document.getElementById('nextbutton').innerHTML = "<div id=\"div1\">Default Link</div> <div id=\"div2\">No Answer Link</div>";    

      //your change event here
      $('input[name|="yesno1"]').change(function () {
         if ($(this).val() == 'YES') {
          $("#div1").hide();
          $("#div2").show();
         } else {
          $("#div2").hide();
          $("#div1").show();
         }
      });    
 }

您可以将此元素（input）绑定到始终存在的document对象，即使在加载jquery之前也是如此。

$(document).on('change', 'input[name|="yesno1"]', function() { 
 if(this.value =='YES') {     
   $("#div1").hide();
   $("#div2").show();     
 } else {    
   $("#div2").hide();
   $("#div1").show();
 }
});

jQuery是/否不同的链接

2 个答案: