Dynamically Create OnClick Event Javascript

Question

I am attempting to create a button that has an onclick event programmically..

 var removeFunction = "removeEmployee(" + "'" + phone + "'" + "," + "'" + pin + "'" + "," + "'" + employees[i].ID + "'" + ")";

    var removeButton = "<a onclick='" + removeFunction + "' " + "data-role='button' data-icon='delete' data-iconpos='notext'></a>";

I have this function in the same javascript file as the the dynamically created code above. I think it is breaking because I need to add quotes around the string parameters. The above code is an attempt to that but if I look at the created markup it reads..

onclick="removeEmployee("

Something is making the rest cut off im not sure what? Also will this run as long as I have a funcition named "removeEmployee" located in my javascript file?

Inspecting the value of removeButton would have been enough to notice the problem, and that's called debugging — Alexander
– Alexander, Commented Sep 10, 2012 at 21:21

jeremy · Accepted Answer · 2012-09-10 21:56:00Z

1

Not to avoid the question, but why wouldn't you do something like this instead:

var bindEvent = function(el, event, handler) {
  if (el.addEventListener){
    el.addEventListener(event, handler, false); 
  } else if (el.attachEvent){
    el.attachEvent('on'+event, handler);
  }
}

var removeButton = document.createElement("a");

removeButton.setAttribute("data-role", "button");
removeButton.setAttribute("data-icon", "delete");
removeButton.setAttribute("data-iconpos", "notext");

bindEvent(removeButton, "click", function(){
    removeEmployee(phone, pin, employees[i]['id']);
});

edited Sep 10, 2012 at 21:56

answered Sep 10, 2012 at 21:21

jeremy

10.1k4 gold badges41 silver badges61 bronze badges

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

2 Comments

Nick LaMarca Over a year ago

this code gives me "Object doesnt supoprt property or method" on the addEventListener line

jeremy Over a year ago

@NickLaMarca that probably goes along with the compatibility thing I had in there before, try the updated code.

fanfavorite · Accepted Answer · 2012-09-10 21:38:07Z

0

Try:

var removeFunction = "removeEmployee('" + phone + "','" + pin + "','" + employees[i].ID + "')";

Also:

var removeButton = "<a onclick='" + removeFunction + "' data-role='button' data-icon='delete' data-iconpos='notext'></a>";

edited Sep 10, 2012 at 21:38

answered Sep 10, 2012 at 21:20

fanfavorite

5,2191 gold badge35 silver badges62 bronze badges

4 Comments

Nick LaMarca Over a year ago

this gives the same problem..<a title="" class="ui-btn ui-btn-up-b ui-shadow ui-btn-corner-all ui-btn-icon-notext" onclick="removeEmployee(" data-theme="b" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperEls="span" data-icon="delete" jQuery18006260579685328433="19" data-iconpos="notext" 7758134094?,?703384996?,?drCZ80?)?="">

fanfavorite Over a year ago

Are you sure the variables exists? Those variables need to be declared or it will stop the js processing.

Nick LaMarca Over a year ago

still same result, I am using IE

fanfavorite Over a year ago

There is something else wrong with your code then as I created a file with this stuff and it works fine. Think you need to supply more information or a demo.

Oriol · Accepted Answer · 2012-09-10 21:22:13Z

0

You could use

var a=document.createElement('a'),
attrs={data-role:'button',data-icon:'delete',data-iconpos:'notext'};
for(var i in attrs){a.setAttribute(i,attrs[i]}
a.onclick=function(){
    removeEmployee(phone,pin,employees[i].ID);
}

answered Sep 10, 2012 at 21:22

Oriol

291k71 gold badges459 silver badges535 bronze badges

Comments

Rikki · Accepted Answer · 2012-09-10 21:25:54Z

0

In XML codes, you can use either double-quotes or single-quotes for setting strings. In this matter, you should use single-quote, then you can use double-quotes inside your string.

Like this:

onclick='removeEmployee("45681", 1, "test")'

Or visa versa:

onclick="removeEmployee('45681', 1, 'test')"

When you write the code you mentioned, it seems like this to the HTML parser:

<element onclick='removeEmployee(' 45681=', 1, ' test=')' />

In this situation, your element has 3 attributes with three different names, not just "onclick" attribute and IT IS WRONG.

Cheers

edited Sep 10, 2012 at 21:25

answered Sep 10, 2012 at 21:19

Rikki

3,5681 gold badge25 silver badges34 bronze badges

Collectives™ on Stack Overflow

Dynamically Create OnClick Event Javascript

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related