jquery - クラスをdivに追加し、そのクラスでonclickイベントを追加します

Question

最初はクリックできない要素がありますが、別の div をクリックするとクリックできるようにしたいと考えています。

私がしたことは

$("#div_1").addClass("selected");

$(".selected").click(function() {
    $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500);
});​

しかし、これは機能していないようです。これの何が問題なのかわかりません。これを行うためのより良い方法があるかもしれません。

Answer 1

Try something like this:

$("#div_1").addClass("selected");

$("#div_1").click(function() {
    if($(this).hasClass('.selected') {
    $("#block").animate({
        width: "70%",
        opacity: 0.4,
        marginLeft: "0.6in",
        fontSize: "3em",
        borderWidth: "10px"
    }, 1500);
    }
});​

また、クリック可能な機能を追加するときの使いやすさのために、これを使用してユーザーにクリック可能に見せます。

$("#div_1").addClass("selected").css('cursor', 'pointer');

Answer 2

そのようなケースを委任する必要があります... .on()を使用してみて、イベントを静的な親に添付してください..

クラスが追加されると、イベントはDOMのロード時にすでに関連付けられているためです。したがって、委任すると問題が解決します。

$("#div_1").addClass("selected");

$('body').on("click", ".selected", function() {
     // Your code here
});​