jquery onclick новый элемент не создан должным образом

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Button - Icons</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <style> 
     #s 
     { 
      width:200px; 
     } 
     #div1 
     { 
      min-width:100px; 
      width:auto; 
      float:left; 
      border:2px solid black; 
      min-height:100px; 
      height:auto; 
      background-color:red; 
     } 
    </style> 
    <script> 
     $(document).ready(function(){ 
      $("div").click(function(){ 
       $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>')); 
      }); 
      $("#s").click(function(){ 
       alert("sljsdf"); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="div1"> 
     VOLVO B9R 
    </div> 
</body> 
</html>

Здесь, когда я нажимаю на первый div, программа создает еще один div. вновь созданный div не отвечает на событие click. в текущем коде я указал, что только что созданный div должен дать предупреждение при щелчке, но не работает. Спасибо!jquery onclick новый элемент не создан должным образом

источник

2014-01-09 user2870746

Он не будет связывать событие 'onclick' на вновь созданном' div' –

Mr alien thanx. – user2870746

бармен извините. я не знаю. Я не проверял эту ссылку – user2870746

Поскольку элемент #s создается динамически, вам необходимо использовать делегирование событий для регистрации обработчиков событий для этих элементов.

Когда вы используете $('#s').click(....); для регистрации обработчика события, он регистрирует дескриптор только тех элементов, которые уже присутствуют в dom во время выполнения кода, в вашем случае, так как эти элементы создаются после этого, обработчики будут не привязываться к вновь созданным элементам

Попробуйте

$(document).ready(function(){ 
$(document).on('click',"div",function(){ 
    $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>')); 
}); 
$(document).on("click", "#s", function(){ 
    alert("sljsdf"); 
}); 
});

DEMO

источник

2014-01-09 07:27:39

спасибо за помощь. демо и теория. Я изучаю jquery самостоятельно. так что это немного отличается от меня .. thanx – user2870746

@ user2870746, если это помогает повысить его и принять как ответ –

Вам нужно degation событий для динамически добавляемых элементов. Время связывания коды для элемента с идентификатором х выполняется элемент не существует в DOM

$(document).on("click", "#s", function(){ 
    alert("sljsdf"); 
});

делегированы событиях

делегированных событие имеет то преимущество, что они могут обрабатывать событие от узлов которые будут добавлены в документ позже. К выбор элемента, который гарантированно присутствует в момент присоединения делегированного обработчика , вы можете использовать делегированные события , чтобы избежать необходимости часто прикреплять и удалять обработчики событий, jQuery doc.

источник

2014-01-09 07:29:53 Adil

Это то, что мне нужно. thanx !! :) – user2870746

Добро пожаловать @ user2870746 – Adil

Когда выполняется ваш обработчик dom, в dom нет div div, поэтому обработчик клика не будет добавлен к элементу.Вы можете использовать event delegation, чтобы исправить эту проблему

$(document).on('click', "#s", function() { 
    alert("sljsdf"); 
});

Демо: Fiddle

источник

2014-01-09 07:30:18

Благодарим вас за демонстрацию. :) – user2870746

попробовать что-то вроде этого

$("body").on('click','#s',function(){ 
    alert("sljsdf"); 
});

ССЫЛКА

http://api.jquery.com/on/

источник

2014-01-09 07:31:07

спасибо за совет !! – user2870746

Вы не можете добавить событие обработчик элемента, который не является IST еще:

$(document).ready(function() { 
    $("div").click(function() { 
     $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>')); 
     $("#s").click(function() { 
      alert("sljsdf"); 
     }); 
    }); 
});

источник

2014-01-09 07:32:14 Korikulum

Попробуйте этот код:

$(document).ready(function(){ 
$("#div1").click(function(e){ 
    $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>')); 
    $("#s").click(function(){ 
     alert("sljsdf"); 
     }); 

    }); 

});

источник

2014-01-09 07:34:52

Пожалуйста, ознакомьтесь LINK

ИЛИ

Попробуйте ниже код ...

Ваш HTML ....

<div id="div1"> VOLVO B9R </div>

Ваш JQuery код ....

$(document).ready(function() {  
    $("div").click(function() {  

     $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>'));  

     $("#s").bind('click', function() { 
      alert("sljsdf"); 
     }); 
    }); 
});

Ваш CSS ....

#s 
{ 
width:200px; 
float:right; 
} 
#div1 
{ 
min-width:100px; 
width:auto; 
float:left; 
border:2px solid black; 
min-height:100px; 
height:auto; 
background-color:red; 
}

источник

2014-01-09 07:36:46

Следующие JQuery строк кода поможет вы ..

$(document).ready(function(){ 
    $('body').on('click','#div1',function(){ 
     $(this).after($('<div id="s" style="background-color:blue;">NLC TRANSPORT</div>')); 
     $('#s').click(function(){ 
     alert('a'); 
     }) 
    }) 
});

источник

2014-01-09 07:39:02

Используйте приведенный ниже код ..

$(document).ready(function() { 
     $("div").click(function() { 
      $(this).after($('<div id="s" style="background-color:blue; clear:both">NLC TRANSPORT</div>')); 
      $("#s").bind("click", function() { 
       alert("sljsdf"); 
      }); 
     }); 

    });

Удачи.

источник

2014-01-09 07:40:00

thanx !!! :) Это отлично работает! – user2870746

Больше всего приветствую .. :) –

jquery onclick новый элемент не создан должным образом

ответ

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