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

时间:2015-06-22 16:01:34

标签: jquery dynamic replace live

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

以下是该方案:

这是HTML(保存在php文件中),取代了' #null_item'后续HTML表格中的元素:



<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;
&#13;
&#13;

&#13;
&#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;
&#13;
&#13;

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

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

@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);
			});
	}