CODEWITHSUNDEEP
javascripthtml
Mohamed Hussain
Mohamed Hussain

Reputation: 7703

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

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);
}

Upvotes: 9

Views: 51167

Answers (8)

Jasen
Jasen

Reputation: 12412

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

Upvotes: 0

chiranjeeb
chiranjeeb

Reputation: 1

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

Upvotes: 0

priti
priti

Reputation: 1

Directly use:

test('elem[i].url')

instead of:

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

to pass the string inside a method.

Upvotes: 0

AmShaegar
AmShaegar

Reputation: 1539

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>

Upvotes: 25

PVIJAY
PVIJAY

Reputation: 95

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

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.

Upvotes: 1

Ahmet DAL
Ahmet DAL

Reputation: 4692

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);
}

Upvotes: 1

Surama Hotta
Surama Hotta

Reputation: 130

Directly use: 

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

instead of: 

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

to pass the string inside a method.

Upvotes: 1

S&#233;bastien Garmier
S&#233;bastien Garmier

Reputation: 1263

Your problem is, that str+="<a href='#' onclick='test('"+elem[i].url+"')'>dd</a><br/><br/>"; will return a string like "<a href='#' onclick='test('your_url')'>dd</a><br/><br/>". 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/>

Upvotes: 3

Related Questions