Question

我正在使用$.get函数加载HTML模板，我想解析这个HTML并将自己的值注入其中。到目前为止，我已经尝试了下面的代码片段，但它似乎没有起作用。

$.get('/js/dynamic/locations', function(newRow) {
    var existing_elem = $('.edit-table tr:last'); 
    existing_elem.after(newRow);
    var appendedRow = existing_elem;
    appendedRow.find('td[data-th="Name"] > span').text(v.location_name);
    appendedRow.find('input').val(v.location_name);
    appendedRow.effect("highlight", {color: '#CCB4A5'}, 1000);
});

加载时newRow的值为：

<tr>
  <td data-th="Name"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value=""></td>
</tr>

Answer 1

首先，您必须将加载的内容附加到DOM中。然后，选择并编辑您想要的任何元素：

编辑（＃2）

HTML（Assumung这是加载的html：2列）

"tapDetected"

的jQuery

<tr>
  <td data-th="Name"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value="">    </td>
  <td data-th="LastName"><span class="edit-input-text"></span>
  <input class="inp input-edit" type="text" name="location_name" value="">    </td>
</tr>

Answer 2

你有没有尝试过：

$(newRow).find('.edit-input-text').text(v.location_name);

Working demo

//Create a jQuery object from your ajax response
var newRow = $('<tr><td data-th="Name"><span class="edit-input-text"></span><input class="inp input-edit" type="text" name="location_name" value=""></td></tr>');

//Manipulate
newRow.find('.edit-input-text').text("I am new here")

//Do whatever
$('#demo').append(newRow);

Answer 3

我认为你的选择器存在问题。试试这个 -

$.get('/js/dynamic/locations', function(newRow) {
    $(newRow).filter('tr td[data-th="Name"] span').text(v.location_name);
});

应该注意选择器'tr td[data-th="Name"] span' OR

$.get('/js/dynamic/locations', function(newRow) {
    $('[data-th="Name"]', newRow).find('span').text(v.location_name);
});

jQuery过滤动态html内容

3 个答案: