如何更改 dynamic/live 元素属性 - (replaceWith()) 使用

Question

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

场景如下：

这里是 HTML（保存在 php 文件中），它替换了后续 HTML table 中的 '#null_item' 元素：

<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>

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

<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[=13=]</td></tr>
  <tr id="totals"><td></td><td></td><td colspan="2"><span class="boxed">Total signs</span></td><td>S[=13=]</td></tr>
  <tr id="totals"><td></td><td></td><td colspan="2"><span class="boxed">Delivery</span></td><td>S[=13=]</td></tr>
  <tr id="totals"><td></td><td></td><td colspan="2"><span class="boxed">Installation</span></td><td>S[=13=]</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[=13=]</td></tr>
  <tr id="grand_total"><td></td><td></td><td colspan="2"><span class="boxed">Grand total</span></td><td>S[=13=]</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>

HTML的第一块成功替换了预期的'#null_item'tr，但是之后，我无法替换'#sign_preview" img的scr，也我可以读取任何现有的 src link.

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

Answer 1

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

您目前运行在 replaceWith 发生之前 执行您的 console.log 语句。

作为第二个参数传递给 $.get 的 function() { } 块（您的 "callback"）在对服务器的 AJAX 调用完成之前不会执行；调用 $.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()');

输出将是：

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

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

以下是我将如何重写它：

$.get("/cart.php").done(function(data) { $('#null_item').replaceWith(data); // further processing }).fail(function(xhr, status, message) { // handle failures alert('Ouch, an error occurred! ' + message); });

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

如何更改 dynamic/live 元素属性 - (replaceWith()) 使用

How to alter dynamic/live element attributes - (replaceWith()) used

jquery

replace

dynamic

live