jquery - jQuery Yes/No 不同的链接

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>";    
}

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

score 1 · Accepted Answer

尝试将事件委托与on(jq 1.7+) 或live(older) 一起用于替换为 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>");
   // ....
}

事件委托

score 0 · Accepted Answer

您的选择：

（推荐）您可以将该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 中，因此您可以将点击处理程序绑定到元素。

  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 - jQuery Yes/No 不同的链接

2 回答 2

Related

Reference