JQuery Изменение содержимого

Question

Я пытаюсь изменить JQuery содержание тегов div так, чтобы оно выглядело так, как будто пользователь проходит через несколько страниц. У меня есть то, что пользователь нажмет кнопку, как только они нажмут кнопку, скрипт запустится и изменит содержимое div. Я хотел иметь как минимум три страницы, чтобы сделать это, но я столкнулся с проблемой после второй страницы. Вот что у меня есть в сценарии:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 

$(document).ready(function() { 

$("#1").click(function() { 
$("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />'); 
$("#rightPart").html(''); 
}); 

$("#2").click(function() { 
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 
}); 

Поэтому, как только я нажимаю на кнопку на первой странице, с идентификатором «1», то он изменяет экран на то, что вторая страница должна показать. Вторая страница отобразит некоторые вещи и создаст еще одну кнопку с идентификатором «2». Когда я пытаюсь щелкнуть по кнопке со второй страницы с идентификатором «2», она ничего не делает. Любая помощь? Это потому, что кнопка создается с помощью скрипта вместо фактического нахождения в html?

Answer 1

Это потому, что кнопка с id = "2" сделана после привязки к событию клика, эта новая кнопка не является det если вы повторно привязываете событие click. Лучшим вариантом было бы использовать on() вместо click(), это сделает это автоматически.

$(document).ready(function() { 

    $("#1").on('click', function() { 
     $("#leftPart").html('<input type="text" id="blash" value="blash" name="blash" ><input type="text" id="hello" value="hello" name="hello" ><input type="text" id="world" value="world" name="world" ><input type="button" name="submit" id="2" value="Submit" />'); 
     $("#rightPart").html(''); 
    }); 

    $("#2").on('click', function() { 
     $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
    }); 

}); 

Answer 2

Да. Это связано с тем, что кнопка «2» отсутствует в DOM во время присоединения события к веб-странице.

Попробуйте использовать

• .live(events, handler(eventObject))
• .on(events [, selector] [, data] , handler(eventObject))
• или делегировать, если вы используете старую версию JQuery

Вы также можете обратиться 'Event binding on dynamically created elements?' больше.

Answer 3

Вы правы, потому что он создан динамически. вы можете использовать .on, чтобы избежать этой проблемы

изменения вам код:

$("#2").click(function() { 
$("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 
}); 

к

$("#leftPart").on("click","#2",function() { 
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input   type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 

, что будет гарантировать, что любой элемент leftPart с идентификатором 2 в настоящее время и в будущем будет иметь вышеупомянутый обработчик событий

Answer 4

Это потому, что вы создаете кнопку динамически. Чтобы делегировать событие click, вам необходимо использовать .on(). Кнопка #2 не создается, когда dom готов, и поэтому она не работает. «body» может быть заменен любым родительским элементом выбранной кнопки. Кроме того, вы не должны использовать число в качестве идентификаторов, поскольку они не являются действительным

$('body').on('click','#2',function(){ 

Answer 5

изменить это

$("#2").click(function() { 
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 

к

$(document).on('click',"#2",function() { 
    $("#rightPart").html('<input type="text" id="meep" value="meep" name="meep" ><input type="text" id="glomp" value="glomp" name="glomp" >'); 
}); 

Числовых значения не являются допустимыми идентификаторами, использовать действительный идентификатор ,