Question

我有这个代码从数据库中检索类别单词（动态生成），然后使用jQuery附加到容器html。这会在正文中生成以下内容;

<body>
    <div id="container">
        <div class="answer" id="opt1">Castle</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt2">Plate</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt3">Boy</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt4">Generous</div>&nbsp;&nbsp;&nbsp;
    </div>
</body>

我的目标是检查鼠标点击任何单词（城堡，板块等），并启动一个事件，例如警告。为此，我尝试以下脚本;

$('.answer').click (function () {
    alert("Hi");  //My Real goal - alert(this.id)
})

然而，这没有任何作用。如果我运行以下代码;

$('#container').click (function () {
    alert("Hi");
})

点击任意一个单词弹出窗口。但在这种情况下，我无法检索'this.id'。我真的不明白我做错了什么。有人可以向我解释一下吗？

jsfiddle

Answer 1

从数据库中检索类别单词（动态生成），然后附加到容器html

听起来你试图在将答案项附加到HTML之前绑定事件。在这种情况下，最简单和最有效的解决方案是将事件委托给父容器：

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">

<fragment
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Answer 2

使用$(this).attr("id")获取您点击

的元素的当前Id

另如提及，如果动态创建元素，则必须使用.on('click'

$('body').on('click','.answer',function () {
    alert($(this).attr("id"));  //My Real goal - alert(this.id)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
        <div class="answer" id="opt1">Castle</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt2">Plate</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt3">Boy</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt4">Generous</div>&nbsp;&nbsp;&nbsp;
    </div>
</body>

Answer 3

试试这个

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div id="container">
        <div class="answer" id="opt1">Castle</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt2">Plate</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt3">Boy</div>&nbsp;&nbsp;&nbsp;
        <div class="answer" id="opt4">Generous</div>&nbsp;&nbsp;&nbsp;
    </div>
</body>

<script>
$('#container').on('click','.answer',function(){
alert(this.id);
})
</script>

＆＃13;

Answer 4

您无法动态创建答案。你可以试试这个：

$(document).on("click", ".answer", function() {
   alert(this.id)
});

Answer 5

试试 event.target

$(document).ready(function() {
$(".answer").click(function(event) {
    alert(event.target.id);
});

}）;

从这里你可以应用各种操作

Answer 6

试试这个

$('#container').on('click', '.answer', function () {
  alert($(this).attr("id"));
})

有关点击页面

6 个答案: