Question

代码应该打印所选div的id但不会。我没有找到错误。谢谢你的帮助。

HTML

<body>
   <div id="form_area">
      <div>
         <button onclick="return add_row();" style="width:100%;">Add Row</button>
      </div>
   </div>
</body>

的Javascript

$(document).ready(function() {
    $('#form_area div').click(function(e) {
        console.log($(this).attr('id'));
    });
});

function add_row() {
    var random_id = Math.floor((Math.random() * 1000) + 1); 
    $('#form_area').prepend('<div id="' + random_id + '" class="form_row"></div>');
}

Answer 1

好的，我想我明白你错过了什么。您在使用ID函数

添加行后尝试记录add_row

.form_row动态添加到DOM。因此，在执行$('.form_row').click(时，没有.form_row来绑定处理程序。以下使用.on方法的方法将处理程序绑定到#form_area，并仅在click事件来自.form_row时执行处理程序

$('#form_area').on('click', '.form_row', function () {
   console.log(this.id);
});

$('#form_area div')选择div div中没有#form_area的{{1}}

html中的评论下方显示选择了哪个div，

ID

Answer 2

要访问id，请使用'on'，因为您的div是动态生成的：

$(document).ready(function() {
   $('#form_area').on('click', '.form_row', function () {
        console.log(this.id);
    });
});

Answer 3

首先，你有jQuery - 你应该使用它来注册你的事件处理程序，而不是使用过时的，容易出错的内联事件处理程序。

其次，您的按钮处理程序位于#formarea内，因此也触发了单击处理程序，因为按钮的父级没有ID。这可能是不可取的。

第三，您的事件处理程序需要委派，因为您试图捕获动态添加元素的事件。

因此，请删除onclick属性并添加：

$('#formarea button').on('click', addRow);

$('#formarea').on('click', '.form_row', function() {  // delegated, for dynamic rows
    console.log(this.id);                            // NB: not $(this).attr('id') !!
});

function addRow(ev) {
    // unmodified
}

请参阅http://jsfiddle.net/alnitak/aZTbA/

Answer 4

尝试console.log($('#form_area div').attr('id'));

使用jquery获取元素id

4 个答案: