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

时间:2016-09-02 17:01:50

标签: javascript jquery html foreach

我在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");
                }
            });
        });

1 个答案:

答案 0 :(得分:0)

很少有人指导你开始。

  • 页面中的ID元素应该是唯一的。 (&#34; subjectClickwd&#34;是一个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 () {