Как показать чаевые для динамически добавленного контента?

У меня есть веб-страница, где некоторый контент добавляется через вызов функции javascript. Некоторые элементы на странице имеют назначенные бонусы. Для тех, которые присутствуют, когда отображаются загрузочные боксы для загрузки страницы. Хотя для динамически добавленного контента они не отображаются. Я использую http://code.google.com/p/jquery-tipbox/downloads/list tipbox toolКак показать чаевые для динамически добавленного контента?

Похоже, проблема неясна без примера. Таким образом, код

<html> 
<head> 

<link rel="stylesheet" href="css/style.css" type="text/css"> 
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> 
<script src="js/jquery.tipbox.js" type="text/javascript"></script> 

<script src="js/my_js_functions.js" type="text/javascript"></script> 

<script type="text/javascript"> 

$().ready(function(){ 

    $("#ele1_id").tipbox("tipbox message 1", 0); 
    $("#ele2_id").tipbox("tipbox message 2", 0); 
    $("#inc1").tipbox("tipbox message 3", 0); 
    $("#inc2").tipbox("tipbox message 4", 0); 
}); 

</script> 

</head> 
<body> 
<center> 

<div style="visibility:visible" > 
<input id='ele1_id' type='radio' name='test' value='test1' 
onClick=get_fields(id,checked) 
> test 1 option <br> 

<input id='ele2_id' type='radio' name='test' value='test2' 
onClick=get_fields(id,checked) 
>test 2 option <br> 

</div> 
</div></td><td alighn=center> 
<div style='visibility:hidden' id='parameters'></div> 
<div style='visibility:hidden' id='parameters_extra'></div> 

</center> 

</body> 
</html>

my_js_functions.js:

function add_fields(name,value){ 

    var target=document.getElementById('parameters_extra'); 
    var content2=""; 
    if (name == 'ele1_id') { 
    if (value == 'sele1') { 
    content2="<table><tr><td id='inc1'>\ 
<b> text to which I want to have tipbox assigned (tipbox message 3) </b></td>\ 
<td><input type='text' maxlength=5 name='inp_value1' ></td></tr></table>"; 
    } 
    else if (value == 'sele2') { 
    content2="<table><tr><td id='inc2'>\ 
<b> another text for which 'tipbox message 4' has to appear </b></td>\ 
<td><input type='text' maxlength=5 name='inp_value2' ></td></tr></table>"; 
    } 
    } 
    target.innerHTML = content2; 
    target.style.visibility = "visible"; 


return false; 

} 

function get_fields(el,checked){ 

    var target=document.getElementById('parameters'); 
    var content; 

    var target2=document.getElementById('parameters_extra'); 
    target2.style.visibility = "hidden"; 

    if (checked){ 
    if (el == 'ele1_id') { 
     content="<table><tr><td><b>select one of the options:</b></td><td>\ 
<select onChange=add_fields('ele1_id',this.options[this.selectedIndex].value) na 
me='ele1_id'>\ 
<option selected='selected' value='None'>None</option>\ 
<option value='sele1'>Selection 1</option>\ 
<option value='sele2'>Selection 2</option>\ 
</select></td></tr></table>"; 
    } 
    else if (el == 'ele2_id') { 

     content="<table><tr><td><b>select one of the options:</b></td><td> \ 
    <select onChange=add_fields('ele2_id',this.options[this.selectedIndex].value) 
name='ele2_id'> \ 
<option selected='selected' value='None'>None</option>\ 
<option value='sele1'>Selection A</option>\ 
<option value='sele2'>Selection B</option>\ 
</select></td></tr></table>"; 

    } 
    target.innerHTML = content; 
    target.style.visibility = "visible"; 
    } 
return false; 
}

источник

2012-04-26 cur4so

Вызов '$ (" blah "). Tipbox();' снова каждый раз, когда он вставляет новые элементы? ps: Вы китайцы? потому что плагин находится в китайском ... –

Вы должны использовать любую функцию getScript JQuery, чтобы загрузить скрипт после динамической нагрузки, или использовать делегат()/о()/(жить) в jquery для привязки события к элементам, загружаемым динамически.

http://api.jquery.com/delegate/ (остаточная) http://api.jquery.com/live/ (остаточная) http://api.jquery.com/on/ http://api.jquery.com/jQuery.getScript/

Вы видите, что проблема заключается в том, что JQuery или даже Javascript сам не может прикрепить событие для содержимого, которого не существует, и, таким образом, если элемент загружается после того, как jquery присоединил событие к типу элемента, это событие НЕ привязано к новому элементу. Поэтому, чтобы исправить это, Jquery получает родительский элемент элемента (через делегат/live/on) и присоединяет событие «на лету». Это действительно здорово, потому что он позволяет приложению присоединяться по требованию, вместо того, чтобы увязать javascript с 1000 привязками событий в случае, когда кто-то, кто присоединяет событие к каждой строке таблицы или аналогичен.

В качестве альтернативы, хотя и более грязный, менее точный и, безусловно, менее эффективный, если этот динамический контент загружается один или несколько раз, вы можете использовать getScript() для загрузки сценария «на лету» вместе с содержимым. :)

Дайте мне знать, если это поможет. :)

источник

2012-04-26 23:28:10 Ryan

Синтаксис плагина - '$ (" a.tipMsg "). tipbox();' и как вы используете '.on' на нем? –

ok ... что такое родительский элемент? div, в который вы загружаете или что у вас есть? – Ryan

$ ("parent"). On ("mouseover", function (event) {$ ("a.tipMsg"). Tipbox();}); - может работать – Ryan

Как показать чаевые для динамически добавленного контента?

ответ

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