2

У меня ситуация, когда мне нужно добавить переменные к функции по событию OnClick, которые предварительно выводятся php скриптом на каждый объект, они разные на каждом из объектов: onclick="моя функция('переменная 1', 'переменная 2');, т.е. таких onclick на одной странице может быть множество, а переменные жестко вписаны в HTML и выводятся посредством перебора for массива объектов в php. Функция одна для всех объектов.

Так же у каждого из объектов назначен класс class="note<?php echo $row->id; ?>", где к классу добавляется id объекта по номеру в БД, чтобы знать с каким из них далее работать в моей функции js.

В функции js происходит смена переменной 2, переменная 1 же всегда остаётся неизменной, это тот же номер (ID) объекта, что добавляется к классу, берётся из БД, опять таки нужен для того, чтобы знать, с каким из объектов работать.

Полностью функцию показывать не имеет смысла, так как собственно она прекрасно работает, но после завершения её, я хочу заново повесить атрибут onclick на объект с новым значением переменной 2, чтобы можно было снова вызвать функцию, в чём и загвоздка.

Здесь, сразу после вызова функции, я обнуляю событие по клику, чтобы можно было далее с объектом работать и событие не возникало постоянно заново, пока не знаю как по другому это можно сделать:

jQuery('.note' + id).attr('onclick', '');

далее, после отработки Ajax функции, я пытаюсь заново повесить атрибут onclick на объект с новым значением переменной 2, но я уже понял, что это не будет работать:

jQuery('.note' + id).attr('onclick', 'noteAgent(\'' + id + '\', \'' + newnote + '\');');
// по русски:
моя функция('переменная 1', 'новая переменная 2');

Интересует, почему не работает добавление атрибута onclick в jQuery, и способ, как это можно реализовать "по другому", может быть используя делегирование событий, но при делегировании я пока представления не имею как передать эти переменные в обрабочик события, да и "слушать" всю таблицу на предмет клика, когда объект в ней относительно мал, не хочется.

2
  • @Igor обнуление работает, но значение onclick не меняется, как и прежде, почему-то
    – Blacknife
    9 мар 2016 в 21:06
  • @Igor я вроде бы по русски выражаюсь, не понимаю, к чему вы всё время придираетесь: у каждого атрибута есть значения (href="значение", onclick="значение", src="значение" .......) или это нужно вам разжевывать ссылками на htmlbook?
    – Blacknife
    9 мар 2016 в 21:14

2 ответа 2

1

"Обнуление события по клику" не стоит делать с помощью .attr('onclick', '') или .removeAttr('onclick') хотя бы потому-что такой код не будет работать в IE < 9. Вместо этого нужно искользовать .prop('onclick', null); (см документацию removeAttr).

Поэтому я поддерживаю newman и настоятельно рекомендовал бы Вам использовать .click(function (e) {...}) или, что то же самое, .bind("click", function (e) {...}); вместо .attr('onclick', ... ). Для удаления хэндла можно использовать .unbind("click").

Использование .click или .bind("click",...) существенно упрощает программирование. Я упомяну лишь два важных факта:

  • onclick атрибут один на элемент, а с помощъю .click или .bind("click",...) можно зарегистрировать несколько хэндлов. Использование .unbind("click") с дополнительными параметрами позволяет удалить отдельный хэндл без побочных эффектов.
  • хэндл, зарегистрированный с помощью onclick атрибута, выполняется в глобальном контексте, в то время как хэндл, зарегистрированный с помощью .click или .bind("click",...) может испольновать любые переменные из внешнего контекста. Это существенно упрощает использование параметров. К тому же jQuery поддерживает много дополнительных видов использования. Я не хочу дублировать документацию jQuery и приведу лишь один пример использования .bind("click", eventData, handler)
<button id="b1" class="note">Button 1</button>
<button id="b2" class="note">Button 2</button>
var localVar = 0, myCompexObj = { test: "a" };

$(".note").bind("click", {x: 2, obj: myCompexObj }, function (e) {
    var myCoxtext = e.data;
    console.log("e.target.id=" + e.target.id);
    console.log("localVar=" + localVar);
    console.log("myCoxtext:");
    console.log(myCoxtext);

    localVar++;
    myCoxtext.obj.test = "b" + localVar;
    myCoxtext.newProp = "x" + localVar;
});

https://jsfiddle.net/OlegKi/jqcvczf9/1/. Для простоты я вывожу все на консоль. Поэтому, нужно открыть консоль, чтобы видеть результаты работы. Результат после нажатия первой, второй и опять первой кнопки выглядит так

введите сюда описание изображения

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

1

Мне кажется вы немного не так используете jQuery. Это как микроскопом орехи колоть.

Для начала, не нужно задавать параметры в виде аргументов функции в HTML. Можно "хранить" эти данные прямо в аттрибутах тега. Например так:

<a href="#" data-param="1" id="1" class="note">click 1</a><br />
<a href="#" data-param="2" id="2" class="note">click 2</a>

Обработчик onclick на все данные можно поставить через класс note. А обращаться к аттрибутам тега можно не через селектор, а через конструкцию $(this) внутри обработчика. Тогда код на JS будет, например, таким

$('.note').click(function(){
  var str = "ID:" + $(this).attr('id');
  var val = $(this).attr('data-param');
  str = str + " PARAM: " + val;
  val++;
  $(this).attr('data-param', val);
  alert(str);
});

В данном коде устанавливается обработчик onclick для всех элементов с классом note. В коде получаем значение id элемента, а так же значение аттрибута data-param. Знчение этого аттрибута изменяется - так что при следующем клике функция будет работать уже с другими значениями.

Думаю я правильно понял основной смысл вашей задачи.

Живой пример можно посмотреть на jsfiddle.net

2
  • да, я уже начал реализовывать подобным способом, но меня всё равно дико интересует, почему onclick никак нельзя поменять) спасибо за ответ!
    – Blacknife
    9 мар 2016 в 21:10
  • @Blacknife все работает: jsfiddle.net/8bLLbqz6 Попробуйте использовать не class а id для идентификации элемента. В вашем случае это более логично.
    – newman
    9 мар 2016 в 21:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.