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-15T16:33:59.033

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 '17 at 16:33

answered Feb 15 '17 at 15:14

Igor

15,833
1
27
32

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 ? – user911 Feb 15 '17 at 15:36
@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. – Igor Feb 15 '17 at 15:43
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. – user911 Feb 15 '17 at 16:27
@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? – Igor Feb 15 '17 at 16:30
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. – user911 Feb 15 '17 at 17:53
@user911 there is no difference in the results of `$(this)[0].attributes.getNamedItem('program').nodeValue` and `this.getAttribute("program")`. I will not modify my answer to make code longer and more complicated. – Igor Feb 15 '17 at 17:59

Passing argument to on click event of dynamically generated element

1 Answers1