Не удалось добавить div, используя событие click jquery

Привет, ребята, я хочу динамически добавить div в div, который я нажимаю. Вот кодНе удалось добавить div, используя событие click jquery

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
<script src="query.js"> 
    $('.hello').click(function(){ 
     $(this).append('<div>I am the new one</div>'); 
    }); 
</script> 
</head> 
<body> 
<div class="hello1">Hello guys</div> 
<div class="hello2">Hiiiiiiii</div> 
<div class="hello3">Awesome</div> 
</body> 
</html>

Может кто-нибудь сказать мне, Что проблема с моим кодом

источник

2015-09-01 Sumanth Udupa

У вас нет элемента с классом '.hello', попробуйте либо' class = "hello someotherclass" 'в ваших _hello_ divs, либо' $ ('. Hello1', '.hello2', ...) 'в вашем JS – Lauromine

Попробуйте обернуть код JQuery в document.ready как

$(document).ready(function(){ // this will execute when DOM is ready 
    //your code 
    $('.hello1').click(function(){ //updated class name 
    $(this).append('<div>I am the new one</div>'); 
    }); 
})

Как я вижу, что вы используете hello класс для привязки события клика к вашему не присутствует в вашем HTML. Так что если вы хотите прикрепить событие для всех начала класса с hello используют это:

$(document).ready(function(){ 
    $('div[class^="hello"]').click(function(){ 
     $(this).append('<div>I am the new one</div>'); 
    }); 
});

DEMO

Вместо этого

<script src="query.js"> //don't use src here

Использование:

<script type="text/javascript">

источник

2015-09-01 09:31:14 Manwal

Это сработает. Лучший ответ, потому что мне не нужно менять имя класса, он работает для любого класса, который начинается с имени «hello». –

Это связано с выбором jqeury '^'. Наслаждайтесь сценариями. – Manwal

Привет, Manwal, я могу сделать этот динамически созданный div для переключения? –

Попробуйте следующее: У вас нет div с class="hello", но класс, который начинается с hello viz hello1, hello2, hello3. Поэтому используйте начало с селектором, как показано ниже. Также разместите свой код внутри $(document).ready(function... или $(function(){..., чтобы он обеспечил, что DOM готов и будет прикреплять обработчик события клика.

Сначала вы должны включить библиотеку jquery, а затем добавить скрипт jquery в другой тег скрипта.

<script src="query.js"></script> 
<script> 
    $(function(){ 
     $('div[class^="hello"]').click(function(){ 
      $(this).append('<div>I am the new one</div>'); 
     }); 
    }); 
</script>

источник

2015-09-01 09:33:08

Вам нужно включить Jquery до и для его использования. Использовать
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
```
Вы не можете загрузить скрипт и определить внутри него скрипт. Итак, следуя не является действительным
```
<script src="query.js">$('.hello')...</script> 
```
Использование ready() или DOMContentLoaded событие или переместить сценарий в нижней части <body>
Там нет элемента с hello класса в разметке, но вы связываете событие на нем ,

Код:

<script src="query.js"></script> 
<script> 
$(document).ready(function() { 
    $('.hello').click(function() { 
     $(this).append('<div>I am the new one</div>'); 
    }); 
}); 
</script>

Demo

$(document).ready(function() { 
 
    $('.hello').click(function() { 
 
    $(this).append('<div>I am the new one</div>'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<div class="hello">Hello guys</div> 
 
<div class="hello">Hiiiiiiii</div> 
 
<div class="hello">Awesome</div>

источник

2015-09-01 09:33:14 Tushar

Есть 3 проблемы в вашем коде

Вы не можете иметь SRC и содержимое для тега сценария
Поскольку сценарий помещается до загрузки элементов, вам нужно поместить скрипт в йот готовый обработчик
Там нет класса называется привет в ваш HTML

так

<div class="hello">Hello guys</div> 
<div class="hello">Hiiiiiiii</div> 
<div class="hello">Awesome</div> 

<script src="query.js"></script> 
<script> 
    jQuery(function ($) { 
     $('.hello').click(function() { 
      $(this).append('<div>I am the new one</div>'); 
     }); 
    }) 
</script>

источник

2015-09-01 09:33:58

Там нет .hello класса в вашем коде, вы используете hello1, hello2hello3 и в s classnames, все они должны быть только hello.

источник

2015-09-01 09:34:43

Прежде всего, для использования селекторов $() вам необходимо включить правильную версию jquery. Затем вам нужно выбрать элемент: у вас есть элемент с классом привет, вместо этого у вас есть hello1, hello2 и hello3. Вы можете удалить числа, поэтому все они будут иметь класс приветствия. И, наконец, поскольку эти элементы не существуют, когда выполняется js-код, вам необходимо обернуть свой код в событие готовности документа или перенести его в конец тега body html. Удачи!

источник

2015-09-01 09:44:28

Не удалось добавить div, используя событие click jquery

ответ

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