2015-06-22 5 views
0

Мне нелегко обернуть голову тем, как получить доступ и изменить атрибуты содержимого HTML, добавленного вместо элемента-заполнителя, с помощью replaceWith.Как изменить атрибуты динамического/живого элемента - (заменитеWith())

Вот сценарий:

Вот HTML (хранится в файле PHP), который заменяет элемент '#null_item' в следующем HTML таблице:

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

Первый блок HTML успешно заменяет предполагаемый «#null_item» tr, но после этого я не могу заменить scr для «#sign_preview» img, а также не читать любую существующую ссылку src.

Может ли кто-нибудь пролить свет? Я знаю, что для событий нужно использовать функцию .on и нацеливать новый элемент, но я не знаю, как использовать этот метод для изменения атрибутов динамически загружаемых элементов.

+1

Как примечание стороны, ваш HTML разметка не является допустимым, идентификаторы должны быть уникальными в контексте документа –

ответ

1

Я думаю, что единственное, что вы, возможно, не обертываете, - это идея обратных вызовов и асинхронных методов.

В настоящее время вы выполняете свои console.log заявления до происходит replaceWith.

Блок function() { } (ваш «обратный вызов»), переданный вторым параметром в $.get, не выполняется до завершения вызова 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); 
}); 
0

@Cory, ваш комментарий указал мне в правильном направлении, и я решить проблему с помощью .done() функцию обратного вызова для .get():

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

+0

FYI, как 'функ (данные) {...} 'и функция' .done() 'будет вызываться, когда завершается' $ .get'. Я бы предложил переместить строку '.outerHTML' в' .done() 'и опустить второй параметр в' $ .get' вообще. Те же параметры передаются каждому, поэтому вам просто нужно добавить параметр 'data' в функцию в .done()'. Например. '$ .get ("/cart.php "). done (function (data) {...}). fail (function() {/ * ouch!* /}); ' –

+0

Я отредактировал свой ответ с помощью фрагмента кода, иллюстрирующего мои мысли. –

 Смежные вопросы

  • Нет связанных вопросов^_^