单击一个元素存在于html中的foreach循环中答案

【问题标题】：click a element exist into foreach loop in html单击一个元素存在于html中的foreach循环中
【发布时间】：2016-09-02 17:01:50
【问题描述】：

我在 html 中有一个 foreach，我想点击一个 div 来查看任何项目 foreach ...但它不起作用... 请帮帮我..

 foreach (KarosazWeb.Models.HeaderItem img in Model.headerslider2) {

<div class="about-item scrollpoint sp-effect2" id="subjectClick" style="border: 1px solid #b3b3b3;border-color:#73d0d6;border-width:3px;border-radius:2px; background-color:#ffffff;background:#73d0d6">
  <h4 id="msat4" style="font-family:Tahoma;color:#ffffff">@img.header</h4>
  <h4 id="msat4" style="font-family:Tahoma;border-bottom:solid;border-color:#fff;color:#43749c; border-width:1px;margin-right:20px;margin-left:20px"></h4> @for (int i = 0; i
  < img.subItem.Count; i++) { <div id="subjectClickwd" @*value="@img.subItem[i].pTextID" *@ readonly rows="auto" style=" direction:rtl; background-color:#def2fa;font-family:font-nazanin;color:#1162a4;font-weight: bold;cursor:pointer;font-size:22px;text-align:right; text-align:justify ;outline-style:none; resize:none; width:100%; border:none;padding:8px;height:auto">
  @img.subItem[i].textLink</div>
<textarea rows="3" id="note" style="direction:rtl; font-family:font-nazanin;font-size:23px;text-align:right; text-align:justify ;margin-top:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px; resize:none; width:100% ;outline-style:none; border:none;padding:10px">@img.subItem[i].summary</textarea>
}
<input type="button" value="@img.header" class="form-control" id="" />
</div>

<br /> 
}

并进入 jQuery 脚本：

$('#subjectClick').click(function () {

            var subInput = $('#subInput').val();
            alert(subInput);
            var funcUrl = window.location.protocol + '//' + window.location.host + '/Home/SubjectClick?subInput=' + subInput;
            $.ajax({
                type: 'POST', url: funcUrl,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                async: false,
                success: function (data) {
                    $('#paragraph').hide();
                    $('#paragraphTXT').show();
                    $('#text').text(data.text);
                    $('#subject').text(data.sub);
                }, error: function (data) {
                    alert("Error in json SubjectClick clicking");
                }
            });
        });

【问题讨论】：

标签： javascript jquery html foreach

【解决方案1】：

一些提示可以帮助您入门。

页面中的 ID 元素应该是唯一的。（“subjectClickwd”是一个 id 在这种情况下 div 元素的属性，并且会有更多在这种情况下不止一个元素）
在事件绑定时元素仍然不存在，所以您将不得不求助于事件委托，以便未来元素可以处理事件。

将id 属性替换为类，并使用事件委托来绑定事件。

从

更改您的 HTML

<div id="subjectClickwd" 
<textarea rows="3" id="note"

到

<div class="subjectClickwd" 
<textarea rows="3" class="note"

然后从

更改您的事件处理程序

$('#subjectClick').click(function () {

到

$(document).on('click', '.subjectClick', function () {

【讨论】：