ループ出力用の動的コンテンツでjqueryセレクタが機能しない

動的コンテンツを出力するforループを設定しましたが、forループのすぐ下のjQuery部分に表示されるような特定のクラスは選択されません。しかし、このセレクタは動作しません。クラスを直接選択した場合、このセレクタを追加するとそれ以上は機能しません。これをjQueryで修正する方法を知っている人は誰ですか？ループ出力用の動的コンテンツでjqueryセレクタが機能しない

function renderSmartphones() { 
 
    var newContent = ""; 
 
    for(var i = 0; i < smartphones.length; i++) { 
 
    newContent += "<div class='col-lg-4 col-md-4 col-sm-4 col-xs-12 box item'>"; 
 
    newContent += "<div class='rom'>" + smartphones[i].rom + "</div>"; 
 
    newContent += '<img src="' + smartphones[i].image + '" '; 
 
    newContent += "class='image'"; 
 
    newContent += "alt='" + smartphones[i].alt_image + "' />"; 
 
    newContent += "<button class='add-to-cart' type='button'>" + "add to cart" + "</button>"; 
 
    newContent += "</div>"; 
 
    } 
 
    $("#mobile").html(newContent); 
 
} 
 

 

 
$(document).on("click", ".add-to-cart", function() { 
 
    $(this).parent(".rom").find("img").css("border", "1px solid red); 
 
\t $(this).find(".item").css("border", "1px solid red"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
\t <div id="wrapper"> 
 
\t \t <span><i id="shopping-cart" alt="shopping-cart-icon"></i></span> 
 
\t \t 
 
\t \t <div id="mobile"></div> 
 
\t </div> 
 
</body>

出典

2016-10-29 Fresh developer

'button.addツーcart'：この修正版をお試しください/json.org）でも普通の古いオブジェクトです） – Andreas

多くのことをより明確にするおかげさまですが、この関数内で特定のクラスをどのように選択すればいいですか？ –

「方法」についてのRorysの回答を確認してください:) – Andreas

あなたのセレクタと委任イベントハンドラが正常に動作しています。主な問題はあなたのDOMのトラバーサルです。 buttonは.itemの親ではないため、find()は機能しません。また、外部CSSファイルでスタイルを定義し、必要に応じてクラスを追加/削除する必要があります。インラインCSSを追加することは悪い考えです。最後に、一貫しない引用のため文字列の連結が壊れていました。 /： `div.rom`（と` smartphones`ではありません[JSON]（HTTPの子ではありません

var smartphones = [{ 
 
    rom: 'rom1', 
 
    image: 'image1.jpg', 
 
    alt_image: 'alt_image1.jpg' 
 
}, { 
 
    rom: 'rom2', 
 
    image: 'image2.jpg', 
 
    alt_image: 'alt_image2.jpg' 
 
}]; 
 

 
function renderSmartphones() { 
 
    var newContent = ""; 
 
    for (var i = 0; i < smartphones.length; i++) { 
 
    newContent += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 box item">'; 
 
    newContent += '<div class="rom">' + smartphones[i].rom + '</div>'; 
 
    newContent += '<img src="' + smartphones[i].image + '" class="image" alt="' + smartphones[i].alt_image + '" />'; 
 
    newContent += '<button class="add-to-cart" type="button">add to cart</button>'; 
 
    newContent += '</div>'; 
 
    } 
 
    $("#mobile").html(newContent); 
 
} 
 

 
$(document).on("click", ".add-to-cart", function() { 
 
    $(this).closest(".item").addClass('active').find("img").addClass('active'); 
 
}); 
 

 
renderSmartphones();

.active { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <span><i id="shopping-cart" alt="shopping-cart-icon"></i></span> 
 

 
    <div id="mobile"></div> 
 
    </div> 
 
</body>

出典

2016-10-29 12:32:13

おかげさまで、多くのことを学びました！ –

もう1つ質問があります。私はすべての項目の中に2つのimg要素を持っています（classnameのロゴが付いたロゴとclassnameのイメージを持つスマートフォンの絵）。クラス名が「image」のスマートフォンを具体的に選択するにはどうすればよいですか？ –

'.find（ 'img'）の代わりに' .find（ '。image'） 'を使用してください。 –

ループ出力用の動的コンテンツでjqueryセレクタが機能しない

答えて

関連する問題