Question

我使用了ajax脚本和部分视图来发布和检索数据，而没有任何回发或视图闪烁。使用下面的ajax脚本会返回部分视图，其内容位于名为＆＃34; ajaxcom＆＃34; 的指定div元素中，如下面的脚本所示。现在，我注意到在数据（＆＃34;这是部分视图＆＃34;）之后检索并显示在视图的指定div元素上似乎它就像一个静态，或者它变得像只读文件，因为它不再响应，我的意思是，在那个部分视图上我有一些功能，比如按钮点击相应的jquery代码，但是当你点击它上面的任何按钮时，它甚至没有触发或响应。这种正常情况是，如果要使用ajax脚本在指定的div元素中显示局部视图，则会出现这样的情况吗？如果是这样的话，如果我仍然希望恢复该局部视图中的功能，我想要点击其上的按钮，我有什么选择？有什么想法或建议吗？感谢...

Ajax脚本：

$.ajax({
    url: '/AjaxComms/AjaxComments',
    type: "POST",
    data: dataObject, 
    dataType: "json",
    success: function(result) {
        $.ajax({
            url: '/AjaxComms/DisplayPartial',
            type: "GET",
            contentType: 'application/html; charset=utf-8',
            data: dataObject, 
            dataType: "html",
            success: function (result) {
                $('#ajaxcom').html(result); // this is where I'm displaying my partial view
            }
        })
    },
    error: function (result) {
        alert(status);
    }
});

PartialView：

@model CRUD_AJAX.Models.CommentReplyModel

<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<table id="mytable">  

  @foreach (var item in Model.Comments )
      {
    <tr >
        <td class="tdstyle" >

  <div style="font-weight:bold;">  @Html.DisplayFor(modelItem => item.name) </div> 

   <p class="comment more" style ="white-space: pre-line; margin-top:0px;margin-bottom:0px; border-radius: 4px 4px 4px 4px; max-width :500px; min-height :5px;  display :block; background-color: #CCCCFF">  @Html.DisplayFor(modelItem => item.comment) </p>
  <p style="margin-top:2px;margin-bottom:0px"> <input type="button" id="like" name="like" value="Like" style="color:blue;border:0px;background-color:inherit;cursor:pointer" /> <input type="button" class ="Reply" name="Reply" value="Replie(s)"  style="margin-bottom:0px;color:blue;border:0px;background-color:inherit;cursor:pointer" /></p>

   <div id="divReply" class ="divrep" style=" position:relative;left:50px; overflow:auto;margin-top:0px;margin-bottom:0px">
           <table>
           @foreach (var item2 in Model.Replies.Where(r => r.Id == item.Id))
              {
                 <tr >

                     <td >
                         <div style="font-weight:bold;"> @Html.DisplayFor(modelItem => item2.name) </div> 

                     <p class="comment more" style ="margin-top:0px;margin-bottom:0px;white-space:pre-line; border-radius: 4px 4px 4px 4px; max-width :445px; min-height :5px;  display :block; background-color: #CCCCFF;">@Html.DisplayFor(modelItem=>item2.reply)  </p>

                   </td>
                 </tr>
              } 
            </table>      

       <div class="editor-field" style="display:none; margin-bottom:5px;margin-top:5px">
        <input type="text" id="comidvalue" name="idrep" value="@Html.DisplayFor(modelItem => item.Id)" />
         <span class="field-validation-valid" data-valmsg-for="idrep" data-valmsg-replace="true"></span>
       </div>
      <br />
       <input type="text" id="namerep" name="namerep" style="width:445px;resize:none" />
       <span class="field-validation-valid" data-valmsg-for="namerep" data-valmsg-replace="true"></span>
      <br />
      <textarea id="reply" name="reply" style="width:445px;height:100px;resize:none" ></textarea>
      <span class="field-validation-valid" data-valmsg-for="reply" data-valmsg-replace="true"></span>
         <br />

       <input type="button" class="postrep" value="Post Reply" name="butname" style="cursor:pointer" /> 


            <br />
     </div>

        </td>       
    </tr>

    }

</table>

Answer 1

使用

将单击处理程序附加到元素时

$('button.postrep').click(function() {...

它仅适用于该元素。当您在执行AJAX调用时插入新的按钮元素时，click事件不会应用于新元素。在这种情况下，您需要使用jquery .on方法使用事件委派。从documentation ＆＃34;委派事件的优势在于，它们可以处理来自稍后添加到文档的后代元素的事件。＆＃34; 。

在您的情况下，未动态更新的最接近元素是id="ajaxcom"元素，因此处理class="postrep"任何动态添加按钮的点击事件的脚本将是

$('#ajaxcom').on('click', '.postrep', function() { 
  // do something
});

是什么导致我在视图的div元素内部分视图变得麻痹？

1 个答案: