Question

我为每个div添加不同的id（#sonu）像sonu1，sonu2，sonu3等所以我使用了这个<button id="sonu_'+p+'">Edit</button>，但我必须对此应用点击功能，以便如何为click功能添加带有sonu id的_'+p+'。这是我的完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="mayank" style="background:#e7e7fd; padding:20px;"></div>
    <br />
    <div id="content">
      <input type="text" id="question" style="width:30%" placeholder="enter your question"/>
      <br /><br />
      <select id="yash">
        <option value="1">radio</option>
        <option value="2">checkbox</option>
        <option value="3">Dropdown</option>
      </select>
      <input type="text" id="amar"   />
      <button id="shubham">Add </button>
    </div>
    <br /><br />
    <div id="rahul" ></div>
    <div id="gaurav" ></div>
    <div id="bhanu" ><select id="vicky" style="display:none;"></select></div>
    <br />
    <br />
    <br />
    <button id="ram">Add in blue area</button>
    <br />
    <br />
    <script type="text/javascript">
      $(function(){
        $('#yash').change(function(){
          if($(this).val() === '3')
            $('#vicky').show();
        });
      });
      $(function(){
        var i=1;
        var p=1;
        $("#shubham").click(function(){
          var x=$("#amar").val();
          var y=$("#yash").val();
          var z=$("#amar").val();
          if(y==3){
            $('#vicky').show();
          }
          if(y==1){
            $("#rahul").append('<div ><br><input type="radio" id="aman'+i+'" >' + '<label for="aman"> '+x+'</label>'+' <button class="anshu">Delete</button> <button id="sonu_'+p+'">Edit</button> <input type="text" id="pankaj" val="12" /> <button id="kuldeep">ok</button></div>');
            i++;
            p++;
          }
          if(y==2){
            $("#gaurav").append('<input type="checkbox" >'+ x+'<button >Delete</button>');
          }
          if(y==3){
            $("#vicky").append('<option>'+z+'</option>'+ x+'<button >Delete</button>');
          }
          var m=$("#rahul").html();
          $('.anshu').click(function(){
            $(this).parent('div').remove();
          });
          $('#pankaj').hide();
          $('#kuldeep').hide();
          $('#sonu').click(function(){
            $('#pankaj').show();
            $('#kuldeep').show();
          });
          $("#kuldeep").click(function(){
            var q=$("#pankaj").val();
            $("label[for=aman]").html(q);
          });
          //$(".anshu").click(function(){
          //$(".aman").remove();
          //});
        });
        $("#ram").click(function(){
          var x=$("#rahul").html();
          var u=$("#question").val();
          $('#mayank').append('<div>'+ u +' '+ x +' </div>');
          $("#question").val('');
          $("#amar").val('');
          $("#rahul").html('');
          $('#yash').prop('selectedIndex', 0);
        });
      });
    </script>
  </body>
</html>

Answer 1

好了...

您想要将事件附加到附加元素...
和要调用的函数也会影响附加元素。

所以$(document).on("click", "[id^='sonu']", function(){会定位你的元素，因为事件处理程序附加到document，一个静态元素（不附加）。

对于要在函数中隐藏/显示的元素，这是相同的，因为这些元素也是动态附加的......但是你必须找到那些不同点击sonu的元素。所以从sonu父母那里找到它们。

所以试试这个：

$(document).on("click", "[id^='sonu']", function(){
  $(this).closest("div").find('.pankaj').show();
  $(this).closest("div").find('.kuldeep').show();
});

AND 为这两个人使用课程而不是ID ... ID 必须是唯一的。
您将它们附加在一个循环中...意味着可以存在多个这些。

Answer 2

使用类选择器并将事件附加到文档。

$(document).on('click','.sonu-button',function(){
// do stuff here

});

当不同的id为每个div动态生成时，如何在id上应用click函数

2 个答案: