Passing a string in onclick function's attribute of element dynamically created element

Question

I am trying to pass a string in the onClick event handler function's arguments of the dynamically created anchor element, see the fiddle http://jsfiddle.net/shmdhussain/bXYe4/.

I am not able to pass the string to the function, but i am able to pass the number integer to the function. Please help me in this. Thanks in advance.

html:

<DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <link rel="stylesheet" href="mystyle.css" class="cssfx"/>

        <script src="/jquery.min.js"></script>
        <script src="colon.js"></script>
    </head>

    <body>

        <div class="mytest">

        </div>


    </body>
</html>
</html>

Javascript:

var elem=[  {"name":"husain","url":"http://google.com","age":21},
            {"name":"ismail","url":"http://yahoo.com","age":22},
            {"name":"nambi","url":"http://msn.com","age":23}
         ]

jQuery(function($){
    var str="";
    for(i=0;i<elem.length;i++){
        str+="<a href='#' onclick='test('"+elem[i].url+"')'>dd</a><br><br>"
        console.log(str);

    }
    $('.mytest').html(str);

});

function test(url){
    console.log("url is "+url);
}

AmShaegar · Accepted Answer · 2017-04-23 18:39:52Z

25

You have to use proper string sytax. This

"<a href='#' onclick='test('"+elem[i].url+"')'>dd</a><br><br>"

will result in

<a href='#' onclick='test('http://domain.tld')'>dd</a><br><br>

You cannot use ' for onclick and the parameters of test. Use \" instead.

"<a href='#' onclick='test(\""+elem[i].url+"\")'>dd</a><br><br>"

Which results in

<a href='#' onclick='test("http://domain.tld")'>dd</a><br><br>

edited Apr 23, 2017 at 18:39

answered Apr 16, 2013 at 11:18

AmShaegar

1,53911 silver badges18 bronze badges

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

Comments

Sébastien Garmier · Accepted Answer · 2013-04-16 11:25:05Z

3

Your problem is, that str+="<a href='#' onclick='test('"+elem[i].url+"')'>dd</a> "; will return a string like "<a href='#' onclick='test('your_url')'>dd</a> ". This will generate a html like this:

<a href='#' onclick='test('your_url')'>dd</a><br/><br/>

In this case, the onclick attribute contains only 'test('.

Try this:

str+="<a href='#' onclick='test(\""+elem[i].url+"\")'>dd</a><br/><br/>";

This will generate a html like this:

<a href='#' onclick='test("your_url")'>dd</a><br/><br/>

answered Apr 16, 2013 at 11:25

Sébastien Garmier

1,2639 silver badges16 bronze badges

1 Comment

Manzer A Over a year ago

@Sébastien, str+="<a href='#' onclick='test(\""+elem[i]+"\")'>dd</a> "; How should we pass object to test function directly as you pass onclick='test(\""+elem[i].url+"\")'>.....in this scenario.You have passed url here but how can we pass object arr[i] . Can you please help.

slm · Accepted Answer · 2013-04-16 12:27:42Z

1

Directly use:

test('"+elem[i].url+"')

instead of:

'test('"+elem[i].url+"')'

to pass the string inside a method.

edited Apr 16, 2013 at 12:27

slm

16.6k13 gold badges119 silver badges131 bronze badges

answered Apr 16, 2013 at 12:11

Surama Hotta

1303 bronze badges

Comments

Ahmet DAL · Accepted Answer · 2013-04-16 12:38:37Z

1

If I didn't misunderstand your question, here is your answer;

var elem=[  {"name":"husain","url":"http://google.com","age":21},
    {"name":"ismail","url":"http://yahoo.com","age":22},
    {"name":"nambi","url":"http://msn.com","age":23}
]

jQuery(function($){
    var str="";
    for(i=0;i<elem.length;i++){
        var a =$('<a>',{href:'#',text:'dd'});
        a.click(function(e){
               test(elem[i].url)
        });
        $('.mytest').append(a).append($('</br>')).append($('</br>'));

    }
});

function test(url){
    console.log("url is "+url);
}

answered Apr 16, 2013 at 12:38

Ahmet DAL

4,74210 gold badges52 silver badges75 bronze badges

1 Comment

Mohamed Hussain Over a year ago

This is also another method to implement, thanks Whispered. But i implement in the same way as i want from AmShaegar 's answer below.

PVIJAY · Accepted Answer · 2016-12-06 05:02:37Z

1

For passing multiple parameters you can cast the string by concatenating it with the ASCII value like, for single quotes we can use '

var str= "&#39;"+ str+ "&#39;";

the same parameter you can pass to the onclick(str) event.It is helpful in cases where we pass multiple parameters.It works with every browser.

answered Dec 6, 2016 at 5:02

PVIJAY

958 bronze badges

Comments

Mohammad Usman · Accepted Answer · 2017-11-22 05:42:32Z

0

Directly use:

test('elem[i].url')

instead of:

test('"+elem[i].url+"')

to pass the string inside a method.

edited Nov 22, 2017 at 5:42

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

answered Nov 22, 2017 at 5:20

priti

1

Comments

QuickSilver · Accepted Answer · 2020-05-12 20:14:01Z

0

var funcName = "SelectPickerBtnSelectEvent('" + str + "')";
$(".btn.dropdown-toggle.btn-light").attr("onclick", funcName);

edited May 12, 2020 at 20:14

QuickSilver

4,0452 gold badges15 silver badges31 bronze badges

answered May 12, 2020 at 18:24

chiranjeeb

1

Comments

Jasen · Accepted Answer · 2020-05-13 05:32:31Z

0

perhaps instead, use a data attribute on the element to hold the string. then in the function retrieve the data.

answered May 13, 2020 at 5:32

Jasen

12.5k2 gold badges37 silver badges50 bronze badges

Collectives™ on Stack Overflow

Passing a string in onclick function's attribute of element dynamically created element

8 Answers 8

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest