0

以下のコードではclass、 a のlinkを からuserに変更していredます。アイデアは、クラス red のリンクはクリックしても機能しないということです。しかし、それはまだあります。なぜこれが起こるのですか？を使用しようとしていましliveたが、非推奨であり、使用する必要があることをお読みくださいon。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>

<script type="text/javascript" src="http://localhost/site/scripts/jQuery.js"></script>

<script type="text/css">
.red{
color:red;
}
</script>

<script type="text/javascript">
$(document).ready(function() {
    $(".user").on("click",function() {
    alert('Was Clicked');
        var idPri = $(this).data("id");
        var idSec = $(this).data("sec");
        $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red');
        $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove();
        });
        return false;
    });
</script>
</head>
<body>

<div id="container">
    <div class="h2" data-id="2">Who is your favorite Math teacher?
        <div>* User Name <span class="user" data-id="3" data-sec="2">Like</span></div>
        <div>* User Name <span class="user" data-id="4" data-sec="2">Like</span></div>
        <div>* User Name <span class="user" data-id="5" data-sec="2">Like</span></div>
        <div>* User Name <span class="user" data-id="6" data-sec="2">Like</span></div>
        <div>* User Name <span class="user" data-id="7" data-sec="2">Like</span></div>
    </div>
</div>

</body>
</html>
4

4 に答える 4

2

onイベントを委任できるように、コンテナーでを使用する必要があります。

$("#container").on("click",'.user',function() {
alert('Was Clicked');
    var idPri = $(this).data("id");
    var idSec = $(this).data("sec");
    $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red');
    $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove();
    });
    return false;
});

ここにフィドルがありますhttp://jsfiddle.net/JPGqq/

于 2013-10-20T11:04:37.260 に答える
2

これを試して：

$(".user","#container").on("click",function() {});
于 2013-10-20T11:18:15.967 に答える
1

委任されたイベントを使用してみることが.userできますが、クラス自体を使用する場合は、次のようにすることができます。

$(document).ready(function() {
$(".user").on("click",function() {
    if($(this).hasClass('red')){
        return false;
    }
alert('Was Clicked');
    var idPri = $(this).data("id");
    var idSec = $(this).data("sec");

    $('.user[data-id="'+idPri+'"][data-sec="'+idSec+'"]').removeClass('user').addClass('red');
    $('.h2[data-id="'+idSec+'"]').find('span[data-sec="'+idSec+'"].user').remove();
    });

  });

ここでデモを確認してください: http://jsfiddle.net/PkBAq/

于 2013-10-20T11:06:00.207 に答える