是什麼讓視圖的div元素中的局部視圖變得癱瘓？

Question

我用ajax腳本和部分視圖發佈和檢索數據，沒有任何回發或視圖閃爍。如下所示，使用下面的ajax腳本將返回partialview及其內容在指定div元素「ajaxcom」中的內容。現在，我注意到數據（「這是partialview」）後是檢索和視圖的指定div元素上顯示，它似乎像一個靜態或者只讀變得像文件，因爲它不再響應，其中我的意思是，在partialview我有一些功能，如按鈕點擊相應的jQuery代碼，但它甚至沒有發射或響應，當你點擊任何按鈕。這是正常的情況下，如果你想顯示一個指定的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() {... 

的元素是適用於該ele只有。當您使用AJAX調用插入新按鈕元素時，click事件不會應用於新元素。在這種情況下，您需要使用jquery .on方法使用事件委託。從documentation「委託事件的優點是它們可以處理來自稍後添加到文檔中的後代元素的事件。」。

在你的情況這是不是動態更新最接近的元素與id="ajaxcom"元素使你的腳本來處理與class="postrep"任何動態添加按鈕的點擊事件，

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