Passing argument to on click event of dynamically generated element

Question

I am trying to pass arguments to onclick event of dynamically generated element. I have already seen the existing stackoveflow questions but it didn't answer my specific need.In this existing question , they are trying to access data using $(this).text(); but I can't use this in my example.

Click event doesn't work on dynamically generated elements

In below code snippet, I am trying to pass program and macroVal to onclick event but it doesn't work.

onClickTest = function(text, type) {
        if(text != ""){
        // The HTML that will be returned
        var program = this.buffer.program;
        var out = "<span class=\"";
        out += type + " consolas-text";
        if (type === "macro" && program) {
            var macroVal = text.substring(1, text.length-1);
            out += " macro1 program='" + program + "' macroVal='" + macroVal +  "'";
        }
        out += "\">";
        out += text;
        out += "</span>";
        console.log("out " + out);


        $("p").on("click" , "span.macro1" , function(e)
        {
            BqlUtil.myFunction(program, macroVal);
        });

    }else{
        var out = text;
    }
    return out;

};

console.log of out give me this

<span class="macro consolas-text macro1 program='test1' macroVal='test2'">{TEST}</span>

I have tried both this.program and program but it doesn't work.

Igor · Accepted Answer · 2017-02-15 16:33:59Z

1

Obtain values of span element attributes, since you include them in html:

$("p").on("click" , "span.macro" , function(e)
{
  BqlUtil.myFunction(this.getAttribute("program"), 
    this.getAttribute("macroVal"));
});

There are, however, several things wrong in your code.

you specify class attribute twice in html assigned to out,
single quotes you use are not correct (use ', not ’),
quotes of attribute values are messed up: consistently use either single or double quotes for attribute values

var out = "<span class='";

...

out += "' class='macro' program='" + program + "' macroVal='" + macroVal + ;

...

out += "'>";

depending on how many times you plan to call onClickTest, you may end up with multiple click event handlers for p span.macro.

edited Feb 15, 2017 at 16:33

answered Feb 15, 2017 at 15:14

Igor

15.9k1 gold badge29 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user911 Over a year ago

I have move the even handler code outside onClickTest. I realized later that if I put it inside the function , my function wasn't getting triggered at all and only onclickevent was getting triggered. can you give me a sample code snippet of how to pass argument ?

Igor Over a year ago

@user911 - Yes, I added it to my answer. You are producing incorrect html. Call console.log(out); before return out; and carefully inspect the result.

user911 Over a year ago

Your answer helped me fix my html quoting issues but I am still not able to pass the argument. I have upvoted your answer but still can't accept it. I have tried both this.program and program. It doesn't work. I have also updated my question to fix the quoting issue , please check.

Igor Over a year ago

@user911 where in my answer do you see the use of this.program or program? The console output, that you added to your question - is this what you expect? A single class attribute of span tag?

user911 Over a year ago

I am doing this inside my onclick function and this works . $(this)[0].attributes.getNamedItem('program').nodeValue) . Your answer helped me to a lot of extent. If you can modify it and add this code snippet, I would be more than happy to accept it.

|

Collectives™ on Stack Overflow

Passing argument to on click event of dynamically generated element

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related