如何访问特定的动态创建的元素？
[英]How to get access to specific dynamically created element?
问题描述
我正在动态创建多个元素，我想访问特定的元素。 我编写这段代码是为了尽可能简单地了解我的问题。
$(document).ready(function() { var a = 0; var b = 0; $('#generate').click(function() { $('#divArea').append('<button id="addedButton' + (a) + '"type="button">button' + (a) + '</button>') $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>') $('#addedDiv' + (a) + '').fadeToggle("slow"); a++; }) //this way i can get acces to only first element $(document).on('click', '#addedButton' + (b) + '', function() { $('#addedDiv' + (b) + '').fadeToggle("fast"); b++; }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divArea"> </div> <button id="generate"> Generate </button> <div id="valuesArea"> </div>
如果我创建多个 id addedButton1,2,3 etc.按钮并单击特定的按钮，我想.show()合适的<div>文本。 我怎样才能做到这一点？
6 个解决方案
解决方案1
1 2019-10-10 11:23:53
如果您需要获取按钮的 id，可以将其添加到数据属性中，然后在. addedButton 中获取该值，然后单击 function。
$(document).ready(function() { var a = 0; var b = 0; $('#generate').click(function(){ $('#divArea').append('<button class="generatedButton" id="addedButton'+(a)+'" data-button-id="'+(a)+'"type="button">button'+(a)+'</button>') $('#valuesArea').append('<div id="addedDiv'+(a)+'">button '+(a)+' clicked </div>' ) $('#addedDiv'+(a)+'').fadeToggle("slow"); a++; }); //this way i can get acces to only first element $(document).on('click','.generatedButton',function(){ b = $(this).data('button-id'); $('#addedDiv'+(b)+'').fadeToggle("fast"); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <div id="divArea"> </div> <button id="generate"> Generate </button> <div id="valuesArea"> </div> </html>
解决方案2
1 2019-10-10 11:30:06
错误是您只将 click 事件绑定到#addedButton0一次。
请参阅重构的代码。 我 append 按钮的data属性，用于单击事件$('#addedDiv' + $(this).data('a')).fadeToggle("fast"); . 这样就不再需要变量b了。
$(document).ready(function() { var a = 0; $('#generate').click(function() { $('#divArea').append('<button id="addedButton' + a + '" data-a="' + a + '" type="button">button' + a + '</button>') $('#valuesArea').append('<div id="addedDiv' + a + '">button ' + a + ' clicked </div>') $('#addedDiv' + a).fadeToggle("slow"); a++; }) //this way i can get acces to only first element $('#divArea').on('click', 'button', function() { $('#addedDiv' + $(this).data('a')).fadeToggle("fast"); }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divArea"> </div> <button id="generate"> Generate </button> <div id="valuesArea"> </div>
解决方案3
1 已采纳 2019-10-10 11:31:12
在包含目标内容id的<button>中使用data-target属性。 因此，您可以通过使用唯一id定位特定内容来轻松切换数据。
$(document).ready(function() { var a = 0; var b = 0; $('#generate').click(function() { $('#divArea').append('<button id="addedButton' + (a) + '"type="button" data-target="addedDiv'+(a)+'">button' + (a) + '</button>') $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>') $('#addedDiv' + (a) + '').fadeToggle("slow"); a++; }) //this way i can get acces to only first element $(document).on('click', "button[data-target]", function() { var targetData = $(this).attr('data-target'); $('#'+targetData).fadeToggle("fast"); }) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divArea"> </div> <button id="generate"> Generate </button> <div id="valuesArea"> </div>
解决方案4
1 2019-10-10 11:33:27
$(document).ready(function() { var a = 0; var b = 0; $('#generate').click(function() { $('#divArea').append('<button onclick="check('+(a)+')" id="addedButton' + (a) + '"type="button">button' + (a) + '</button>') $('#valuesArea').append('<div id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>') $('#addedDiv' + (a) + '').fadeToggle("slow"); a++; }) //this way i can get acces to only first element //$(document).on('click', '#addedButton' + (b) + '', //function() { //$('#addedDiv' + (b) + '').fadeToggle("fast"); //b++; //}) }); function check(id){ $('#addedDiv'+ (id)).show(); }
<:-- begin snippet: js hide: false console: true babel: null --> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="divArea"> </div> <button id="generate"> Generate </button> <div id="valuesArea"> </div>
解决方案5
0 2019-10-10 11:14:24
用户可以通过添加 class 名称并在 Jquery 中使用它来完成this操作。
$(document).ready(function() {
var a = 0;
var b = 0;
$('#generate').click(function(){
$('#divArea').append('<button class="addedButton" type="button">button'+(a)+'</button>')
$('#valuesArea').append('<div id="addedDiv'+(a)+'">button '+(a)+' clicked </div>' )
$('#addedDiv'+(a)+'').fadeToggle("slow");
a++;
})
//this way i can get acces to only first element
$(document).on('click','.addedButton', function(){
$(this).fadeToggle("fast");
})
});
解决方案6
0 2019-10-10 11:25:47
将 class 分配给 th 元素，然后使用 $(this) 获取特定 id 并根据需要访问它。
$(document).ready(function() {
var a = 0;
var b = 0;
$('#generate').click(function() {
$('#divArea').append('<button class="btn_class" id="addedButton' + (a) + '"type="button">button' + (a) + '</button>')
$('#valuesArea').append('<div class="div_class" id="addedDiv' + (a) + '">button ' + (a) + ' clicked </div>')
$('#addedDiv' + (a) + '').fadeToggle("slow");
a++;
})
});
$(document).on('click', '.btn_class', function() {
id = $(this).attr('id'); // To get the ID of the element
$('this').fadeToggle("fast");
});
由于这是一个 $(document) 查询，您不需要将它放在准备好的 function 下。 如果您只想切换它，我认为您不需要为元素提供 id 。 希望这可以帮助！
如何访问动态创建的<li> javascript 中的元素？</li>
[英]How to access the dynamically created <li> Element in javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.