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

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

javascript jquery

Javascript 当为每个div动态生成不同的id时，如何在id上应用click函数,javascript,jquery,Javascript,Jquery,我为每个div添加了不同的id（#sonu），如sonu1、sonu2、sonu3等因此，我使用了这个编辑，但我必须对其应用单击功能，因此如何添加带有sonu id的\uu'+p+'，用于单击功能。这是我的全部代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

我为每个div添加了不同的id（#sonu），如sonu1、sonu2、sonu3等因此，我使用了这个

编辑

，但我必须对其应用单击功能，因此如何添加带有sonu id的

\uu'+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>


无标题文件





收音机
复选框
下拉列表
添加









添加蓝色区域




$（函数（）{
$（'#yash'）.change（function（）{
if（$（this.val（）='3'）
$（'#vicky'）.show（）；
});
});
$（函数（）{
var i=1；
var p=1；
$（“#shubham”）。单击（函数（）{
var x=$（“#amar”）.val（）；
变量y=$（“#yash”）.val（）；
var z=$（“#amar”）.val（）；
如果（y==3）{
$（'#vicky'）.show（）；
}
如果（y==1）{
$（“#rahul”）.append（“
”+“”+x+“”+”删除编辑确定”）；
i++；
p++；
}
如果（y==2）{
$（“#gaurav”）。追加（“”+x+“删除”）；
}
如果（y==3）{
$（“#vicky”）。追加（“”+z+“”+x+“删除”）；
}
var m=$（“#rahul”）.html（）；
$（'.anshu'）。单击（函数（）{
$（this.parent（'div'）.remove（）；
});
$（'#pankaj'）.hide（）；
$（'kuldeep'）.hide（）；
$（'#sonu'）。单击（函数（）{
$（'#pankaj'）.show（）；
$（'#kuldeep'）.show（）；
});
$（“#kuldeep”）。单击（函数（）{
var q=$（“#pankaj”）.val（）；
$（“label[for=aman]”）html（q）；
});
//$（“.anshu”）。单击（函数（）{
//$（“.aman”）.remove（）；
//});
});
$（“#ram”）。单击（函数（）{
var x=$（“#rahul”）.html（）；
var u=$（“#问题”）.val（）；
$（'#mayank'）。附加（'+u+'+x+'）；
$（“#问题”）.val（“”）；
美元（“#amar”）.val（“”）；
$（“#rahul”）.html（“”）；
$（'yash'）.prop（'selectedIndex'，0）；
});
});

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

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

});

好的

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

因此

$（document）。在（“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();
});

和对这两个类使用类而不是id…id必须是唯一的

你正在一个循环中添加它们…这意味着可以有多个。

如果要调用的函数对于所有

#sonu…

都是相同的，请尝试

$（文档）。在（“单击”，“id^='sonu']”上，function（）{

其中

^=

表示“以开头”。好的，让我检查一下这$（文档）。在（“单击”，“id^='sonu']”上，function（）{$（“#pankaj”）.show（）；$（“#kuldeep”）.show（）；）；我已经应用了这种类型，对吗？？？对…它是否有效？这个答案与我的想法不同