2015-09-18 3 views
0

Когда я меняю содержимое страницы на ajax, мои функции перестают работать. это мои скрипты:javascript не работает после изменения содержимого ajax

$function(){ 
    $('input[name="formtype"]:radio').change(
     function(){ 
      var formtype = $('input[name=formtype]:checked').val(); 
      $.ajax({ 
       url: '/changeform.php', 
       method: 'post', 
       data: {"type": formtype}, 
       success: function (data) { 
        $(form).html(data); 
       } 
      }) 
     } 
    ); 

    $('input[name="set_address"]').on('change', function() { 
     $('input[name="university"]').prop('disabled',false); 
     $('input[name="school"]').prop('disabled',false); 
    } 
} 

это мое базовое содержание:

<body> 
    <input type="radio" name="formtype" value="1" checked> 
    <input type="radio" name="formtype" value="2"> 

    <form method="post" action="action.php"> 
     <input type="checkbox" name="set_address" checked> 
     <input type="text" name="university" disabled> 
    </form> 
</body> 

когда "formtype" изменение, AJAX возвращает содержание этой формы в:

 <input type="checkbox" name="set_address" checked> 
     <input type="text" name="school" disabled> 

теперь, когда я снимите флажок «set_address "checkbox вход школы не активен. как я могу его решить?

+0

Вы можете использовать $ (документ) .На ('изменения', 'yourselector', функция() {// ваш код здесь}) –

ответ

2

В настоящее время то, что вы используете, называется «прямой» привязкой, которая будет прикрепляться только к элементу, который существует на странице, когда ваш код делает вызов привязки события.

Вы должны использовать Event Delegation с использованием .on() делегированных-событий подхода, при создании элементов динамически или селектора манипуляции (например, удаление и добавления классов) или замещающих элементов.

т.е.

$(parentStaticContainer).on('event','selector',callback_function) 

Пример

$('form').on('change', 'input[name="set_address"]', function(){ 
    //Your code 
}); 
+0

Это событие «change», а не 'click'. – George

+0

Он отлично работает, спасибо за ваше полное объяснение – Ali

+0

Знаете ли вы, как я могу выбрать измененный элемент ?! здесь вводятся в новой форме? @Satpal – Ali

2

Когда <input type="checkbox" name="set_address" checked> заменен, вы теряете обработку функций, которые были прикреплены к нему событие.

Вместо этого делегировать обработчик события:

$('form').on('change', 'input[name="set_address"]', function() { 
    $('input[name="university"]').prop('disabled',false); 
    $('input[name="school"]').prop('disabled',false); 
} 
0

Используйте делегат

$(document.body).on("change",'input[name="set_address"]', function() { 
Смежные вопросы