нажмите события проблемы в jquery - PullRequest
Новая
       32

нажмите события проблемы в jquery

3 голосов
/ 03 января 2011

Я не знаю, хорошо ли объясняется это название. Ниже приведен код, который я написал для создания элементов div при нажатии кнопки. Затем, нажав на любой из созданных элементов div, мы можем изменить фон элемента div, выбрав цвет из выпадающего списка. Однако, если я нажму на другой элемент div и попытаюсь изменить цвет, выбрав другой цвет из выпадающего списка, на ранее выбранные элементы div также повлияет новый цвет. Почему это происходит. Я только хочу, чтобы выбранный div изменил цвет, не затрагивая ранее нажатые div. На этом сайте я читаю множество тем, в некоторых из которых говорится об отмене кликов, но я не могу решить проблему. Спасибо за помощь. 

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

<style> 
.aaa { width:100px; height:100px;background-color:#ccc;margin-bottom:5px;}
p{widht:500px; height:500px; margin:0px; padding:0px;border:2px solid red;color:#000;}
</style>

<select id="item_select" name="item"> 
    <option value="1">red</option> 
    <option value="2">blue</option> 
    <option value="3">green</option> 
</select>

<button>Click to create divs</button>
<p id="ptest"></p>


<script type="text/javascript">
var dividcount = 1;
$("button").click(run);
function run(){
 var myDiv = $('<div id=lar'+dividcount+' class=aaa></div>');
 $(myDiv).clone().appendTo('#ptest');
 $(dividcount++);
 $("div").bind('click',(function() {
  var box = $("div").index(this);
  var idd = (this.id);
  $("#"+idd).text("div #"+idd);
  $("select").change(function(){
   var str= $("select option:selected").text();
   $("#"+idd).css("background-color",str);
  });
 }));
}; 
</script>

Ответы [ 3 ]

0 голосов
/ 03 января 2011

Готовый пример: http://jsfiddle.net/fUHFp/1/ (если я понимаю, что вы собираетесь)

Делая это: 

$("div").bind('click',(function() { 
    // ...

Вы назначаете событие нажатия на каждый div на странице каждый раз, когда нажимается button.

Полагаю, вы просто хотите присвоить его вновь созданному.

Вместо этого: 

$("div").bind('click',(function() {
  var box = $("div").index(this);
  var idd = (this.id);
  // ...

сделать это: 

myDiv.bind('click',(function() {
  var box = $("div").index(this);
  var idd = (this.id);
  // ...

, поэтому вы привязываетесь только к новому элементу <div>.

То же самое произойдет с change() событием, которое вы связываете внутри этого click, как @ karim79 указал .

Также эта строка: 

$(dividcount++);

... не имеет смысла. Вам не нужно оборачивать все в объект jQuery.

Просто сделайте это: 

dividcount++;

Кроме того, вам не нужно клонировать <div>, который вы только что создали, поскольку вы не сохраняете оригинал. И вам не нужно помещать myDiv в объект jQuery, поскольку он уже равен единице.

Так вот: 

 $(myDiv).clone().appendTo('#ptest');

... может быть так: 

 myDiv.appendTo('#ptest');

РЕДАКТИРОВАТЬ: Что касается события .change(), кажется, что вы пытаетесь изменить цвет всех динамических div'ов при изменении <select>. Если так, то это не способ сделать это.

Вместо этого вы должны выбрать эти div по имени класса aaa в обработчике change(), чтобы установить цвет.

Так что полностью уберите обработчик change из функции run() и замените его следующим: 

$("select").change(function(){
   var str= $(this).find("option:selected").text();
   $(".aaa").css("background-color",str);
});

Также нет причин перестраивать селектор для элемента, который у вас уже есть внутри обработчика click(). Вы можете передать this объекту jQuery.

Так вот: 

$("#"+idd).text("div #"+idd);

должно быть так: 

$(this).text("div #"+idd);
0 голосов
/ 03 января 2011

Я настроил скрипку @ http://jsfiddle.net/BUghk/

Твой код заставил мои глаза кровоточить. Так что я позволил себе переписать его:)

0 голосов
/ 03 января 2011

Измените это: 

$("select").change(function(){
   var str= $("select option:selected").text();
   $("#"+idd).css("background-color",str);
});

на это: 

$(this).find("select").change(function()
    var str= $(this).find("option:selected").text();
    $("#"+ idd ).css("background-color",str);
});

Проблема, как я вижу, состоит в том, что каждый раз, когда вы нажимаете на div, вы привязываете обработчик изменений ко всемвыбирает на странице.Сделайте так, чтобы ваш код выполнял поиск по выбранному элементу в выбранном элементе div, а не по всем выбранным элементам на странице.

...