Question

我很难围绕如何使用replaceWith访问和更改添加的HTML内容的属性来代替占位符元素。

以下是该方案：

这是HTML（保存在php文件中），取代了＆＃39; #null_item＆＃39;后续HTML表格中的元素：

＆＃13;

<tr id="sign_options">
	<td>
		<input class="finalSign" type="hidden" value="" name="item_name_1" />
		<figure class="sample">
			<a id="sign_preview_lightbox" href="" rel="lightbox" title="Sign preview">
				<img id="sign_preview" src="/signs/previews/basic_aluminium_spacer4_f.jpg" alt="Sign preview" title="Sign preview" />
			</a>
		</figure>
	</td>
</tr>

＆＃13;

if(localStorage['cartItem']) {
  $.get("/cart.php", function(data) {
    $('#null_item').replaceWith($(data));//fix this 'replaceWith' kak!
  });
}

console.log(signPreview);
console.log(document.getElementById('sign_preview').src);

＆＃13;

<table id="quote">
  <colgroup>
    <col id="sign_col" span="1"><col id="options_col" span="1"><col id="qty_col" span="1"><col id="price_col" span="1"><col id="total_col" span="1">
  </colgroup>
  <th>Sign</th><th>Options</th><th>Qty</th><th>Price</th><th>Total</th>

  <tr id="null_item"><td><span class="italic">Empty</span></td><td></td><td></td><td></td><td id="delivery" class="subtotal">S$0</td></tr>
  <tr id="totals"><td></td><td></td><td colspan="2"><span class="boxed">Total signs</span></td><td>S$0</td></tr>
  <tr id="totals"><td></td><td></td><td colspan="2"><span class="boxed">Delivery</span></td><td>S$0</td></tr>
  <tr id="totals"><td></td><td></td><td colspan="2"><span class="boxed">Installation</span></td><td>S$0</td></tr>
  <tr id="discount"><td colspan="2">Discount code <input maxlength="7" class="discountCode" value="" onchange="calculateTotals()" name="discount_code"></td><td colspan="2"><span class="boxed">Discount</span></td><td>-S$0</td></tr>
  <tr id="grand_total"><td></td><td></td><td colspan="2"><span class="boxed">Grand total</span></td><td>S$0</td></tr>
  <tr id="buy_row"><td colspan="4"><img id="secure" src="/img/payment.png" alt="Secure payment via Paypal" title="Secure payment via Paypal"></td><td><input id="buy_now" class="buy_button" type="submit" name="submit" value="BUY NOW" alt="PayPal . The safer, easier way to pay online." onclick="paypalPasser()" /></td></tr>
</table>

＆＃13;

第一个HTML块成功替换了预期的＆＃39; #null_item＆＃39; tr，但在那之后，我无法替换#r;＃sign_preview＆＃34; img，我也无法读取任何现有的src链接。

任何人都可以光明吗？我知道对于事件，必须使用.on函数并定位新元素，但我不知道如何使用该方法来改变动态加载元素的属性。

Answer 1

我认为你唯一可能没有想到的就是回调和异步方法。

您当前正在运行console.log语句 replaceWith发生之前。

作为第二个参数传递给function() { }的{{1}}块（您的“回调”）在对服务器的AJAX调用完成之前不会执行;调用$.get后，其余代码将继续立即运行。

试试这个，看看效果：

$.get

输出将是：

console.log('About to $.get');
if(localStorage['cartItem']) {
  console.log('$.get()ing...');
  $.get("/cart.php", function(data) {
    $('#null_item').replaceWith($(data));//fix this 'replaceWith' kak!
    console.log('$got!');
    console.log(document.getElementById('sign_preview').src);
  });
}
console.log('After $.get()');

所以基本上，你试图在元素存在之前访问它。如果你想通过AJAX方法运行代码，它应该在回调中，或者从回调中调用。

以下是我将如何重写它：

About to $.get
$.get()ing...
After $.get()
...
$got!
<the value of .src>

Answer 2

@Cory，你的评论指出了我正确的方向，我使用.get（）的.done（）回调函数解决了这个问题：

	if(localStorage['cartItem']) {
		$.get("/cart.php", function(data) {
			document.getElementById('null_item').outerHTML = data;
			//$('#null_item').replaceWith($(data));//fix this 'replaceWith' kak!
			//$('#null_item').remove();
		})
			.done(function() {
				//Assign cart object key-values to table row elements
				var parsedCartItem = JSON.parse(localStorage['cartItem2']);
				var signPreview = parsedCartItem.Sign.Front;
				
				console.log(signPreview);
				console.log(document.getElementById('sign_preview').src);
				
				$('#sign_preview_lightbox').attr('href', signPreview);
				$('#sign_preview').attr('src', signPreview);
			});
	}

如何更改动态/实时元素属性 - （replaceWith（））使用

2 个答案: