странное поведение с обработчиком jquery click

Question

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

Basic HTML, как:

<div id="wrap"> 
    <p></p> 
    <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'> 
    <p></p> 
    <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'> 
    <p></p> 
    <input type="radio" data-check='class-check' data-uncheck='class-uncheck' style='display:none;'> 
</div> 

создавать собственные радиостанции:

$("#wrap").radio({someData}); 

Я успешно создать элементы мне нужно, и отображаются изображения, просто есть некоторые проблемы с событием щелчка (часть кода):

var elems = []; 
for (var i = 0; i < someData.length; i++) { 
    elems.push({}); 


    elems[i].input = $(this).find("input").eq(i);     // get input 
    $("<div></div>").insertAfter(elems[i].input);     // create a div to display image to 
    elems[i].wrap = elems[i].input.next(); 
    elems[i].wrap.click(function(elem){ 
     console.log(elem);          // this console.log is triggered when the page load, not on click event 
     elem.addClass('img-checked').removeClass('img-uncheked'); // only the last element in elems have its class changed, not the elems[i] I give as parameter. 
    }(elems[i])); 
} 

Я не understund почему console.log запускается при загрузке скрипта, а не в событии клика.

Также отображаются console.log, но изменение класса применяется только к последнему элементу elems[i] при нажатии кнопки.

Я также попытался без предоставления каких-либо параметров click функции и использовать только elems[i] непосредственно, но он действует одинаково, всегда применяющие изменения на последний вход elems

Answer 1

Я не understund почему console.log запускается при загрузке сценария, а не на событие щелчка.

Потому что вы Выполнение функции Функция немедленно.

elems[i].wrap.click(function(elem){ 
    console.log(elem);          
    elem.addClass('img-checked').removeClass('img-uncheked'); 
}(elems[i])); 

См. (elems[i]) в конце? Это вызывает функцию и передает ее значение возврата в .click. Это может быть более очевидным то, что вы делаете, если вы определяете функцию отдельно:

function foo(elem){ 
    console.log(elem);          
    elem.addClass('img-checked').removeClass('img-uncheked'); 
} 
elems[i].wrap.click(foo(elems[i])); 

Это должно быть ясно теперь, почему console.log вызывается при загрузке страницы.

---

Если вы хотите, чтобы захватить текущий элемент, я предлагаю использовать проход elems[i] в event.data:

elems[i].wrap.click(elems[i], function(event){ 
    console.log(event.data);  
    // elem/event.data is not a jQuery object, so I don't know which element 
    // you wanted to target here 
    elem.addClass('img-checked').removeClass('img-uncheked'); 
}); 

Если вы посмотрите на jQuery documentation for .click, вы можете увидеть, что она принимает необязательный eventData аргумент , который будет доступен для обработчика событий как event.data.

Answer 2

elems[i].wrap.click(function(elem){ 
     console.log(elem);          // this console.log is triggered when the page load, not on click event 
     elem.addClass('img-checked').removeClass('img-uncheked'); // only the last element in elems have its class changed, not the elems[i] I give as parameter. 
    }(elems[i])); 

в основном нажмите параметр функции в обозначает событие. снова вы передаете элемент в качестве параметра функции щелчка, но щелчок принимает указатель на функцию. вам не нужно проходить элемент. Вы можете получить доступ к элементу с помощью $ (это)

так изменить его

elems[i].wrap.click(function(event){ 
     console.log($(this));          // this console.log is triggered when the page load, not on click event 
     $(this).addClass('img-checked').removeClass('img-uncheked'); // only the last element in elems have its class changed, not the elems[i] I give as parameter. 
    });