jQuery-從ajax請求中選擇數據子集不起作用

Question

我正在使用模式提交表單。 我的工作正常。 我遇到的問題是用ajax請求返回的數據子集替換模式的子集。

$.ajax({ url: actionUrl, method: 'post', data: dataToSend, processData: false, contentType: false })
  .done(function (data) {

   var newBody = $('.modal-body', data);
   console.log(newBody);
   placeholderElement.find('.modal-body').replaceWith(newBody);
   //other stuff
    }

我正在嘗試替換活動模式的子集（即獲取模式主體），並用ajax請求中的數據子集替換它。

在某些情況下，我對ajax請求的回復如下：

<div class="modal-body"><div class="alert alert-danger">Error</div></div>

但是，當我的ajax請求完成時，新成員為空。 選擇器($('.modal-body', data); ）返回一個空對象。 我不確定為什么要作為選擇器在響應中存在，並且應該將<div class="alert alert-danger">Error</div>作為新對象返回。

如果我將響應修改為<div class="modal"><div class="modal-body"><div class="alert alert-danger">Error</div></div></div> ，選擇器然后工作。

我的問題是，為什么一個有效而另一個無效？

作品： $('.modal-body', '<div class="modal"><div class="modal-body"><div class="alert alert-danger">Error</div></div></div>');

不起作用 ： $('.modal-body', '<div class="modal-body"><div class="alert alert-danger">Error</div></div>');

我需要做些什么來簡化呢？ 為什么其中一個選項不起作用？

---

在ajax請求時，我的placeholderElement是一個簡單的引導程序模式：

<div class="modal fade"  tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="loading"></div>
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
//stuff
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-dark text-light" data-save="modal">Save changes</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

選擇器$('.modal-body', data)試圖在$('.modal-body', data)中找到具有該類的現有元素，但是data必須是實際的Element或另一個jQuery實例。 如果data是字符串，則可以嘗試首先解析HTML：

var newBody = $('.modal-body', $(data));

Answer 2

首先，jQuery函數有兩個參數，一個是字符串（選擇器），第二個必須是DOM元素，Document或jQuery元素才能用作上下文。

http://api.jquery.com/jquery/#jQuery1

最后，第二種方法不起作用的原因是，上下文采用了根節點，而忽略了根節點來搜索選擇器。 這是我做了> _ <的推論。

編輯：

從鏈接我只給你：

“默認情況下，選擇器從文檔根目錄開始在DOM中執行搜索。但是，可以通過使用$（）函數的可選第二個參數為搜索提供備用上下文。”

就是說它忽略了根元素，因為它在^^中表示。

我希望我能為您提供幫助:)