I have a situation where I need to add variables to the function on the OnClick event, which are previously displayed by the php script for each object, they are different on each of the objects: onclick="моя функция('переменная 1', 'переменная 2'); t .e. such onclick on one page can be set, and variables are rigidly inscribed in HTML and displayed by iterating over an array of objects in php. The function is the same for all objects.

Also, each of the objects is assigned the class class="note<?php echo $row->id; ?>" , Where the object's id added to the class by its number in the database in order to know which of them will continue to work in my js function.

In the js function, a change of переменной 2 occurs, переменная 1 always remains unchanged, this is the same object number (ID) that is added to the class, taken from the database, again needed to know which of the objects to work with.

Fully showing the function does not make sense, since in fact it works fine, but after completing it, I want to re-hang the onclick attribute on the object with the new value of переменной 2 , so that you can call the function again, which is the catch.

Here, immediately after the function call, I reset the event by click so that you can continue to work with the object and the event does not occur repeatedly anew, until I know how it can be done differently:

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

Further, after working out the Ajax function, I try to re-hang the onclick attribute on the object with the new value of переменной 2 , but I already realized that this will not work:

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

I wonder why adding the onclick attribute to jQuery does not work, and the way how it can be implemented “differently” can be using event delegation, but when delegating, I still have no idea how to pass these variables to an event handler, and “listen” The whole table for a click, when the object in it is relatively small, is not desirable.

  • @Igor zeroing works, but the value of onclick does not change, as before, for some reason - Blacknife
  • @Igor I seem to express myself in Russian, I don’t understand what you are nagging about all the time: each attribute has values ​​(href = "value", onclick = "value", src = "value" .......) Or is it necessary for you to chew on htmlbook links? - Blacknife

2 answers 2

"Zeroing an event by clicking" should not be done using .attr('onclick', '') or .removeAttr('onclick') at least because such code will not work in IE <9. Instead, you need to use .prop('onclick', null); (see removeAttr documentation ).

Therefore, I support newman and would strongly recommend that you use .click(function (e) {...}) or, equivalently, .bind("click", function (e) {...}); instead of .attr('onclick', ... ) . You can use .unbind("click") to remove the handle.

Using .click or .bind("click",...) greatly simplifies programming. I will mention only two important facts:

  • onclick attribute is one per element, and with .click or .bind("click",...) you can register several handles. Using .unbind("click") with additional parameters allows you to remove a single handle without side effects.
  • the handle registered with the onclick attribute is executed in the global context, while the handle registered with the .click or .bind("click",...) can use any variables from the external context. This greatly simplifies the use of parameters. In addition, jQuery supports many additional uses. I do not want to duplicate the jQuery documentation and give just one example of using .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/ . For simplicity, I bring everything to the console. Therefore, you need to open the console to see the results of the work. The result after pressing the first, second and again the first button looks like this

enter image description here

It may seem that I’ve been a little wise with the parameters, but I simply wanted to make it clear that you can implement many different scenarios in this way, and it’s very simple.

    I think you're a little wrong using jQuery. It's like a microscope to prick nuts.

    To begin with, you do not need to set parameters as arguments to functions in HTML. You can “store” this data directly in the tag attributes. For example:

     <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>

    The onclick handler for all data can be delivered via the note class. And you can access the tag attributes not through a selector, but through the $(this) construct inside the handler. Then the JS code will be, for example,

     $('.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); });

    In this code, an onclick handler is set for all elements with the class note . In the code, we get the id value of the element, as well as the value of the data-param attribute. The value of this attribute changes - so the next time the function is clicked, the function will work with other values.

    I think I correctly understood the basic meaning of your task.

    A live example can be viewed at jsfiddle.net

    • Yes, I have already started to implement in a similar way, but I still wonder wildly why onclick can not be changed) thanks for the answer! - Blacknife
    • @Blacknife everything works: jsfiddle.net/8bLLbqz6 Try using not class but id to identify the element. In your case it is more logical. - newman