We Keep Coding

onclick function in loop, executes without clicking

Im fetching data from a blizzard api(working fine) and i have a jquery $each loop to retrieve the data which i then append in a ul. i want to add a button within every time the loop gives out data to an object. the problem is that when i use onclick='"+myfunction(param)+"' inside the loop, it will execute the function before i have pressed the button the onclick is attached to. when i check the browser it says onclick="undefined". here is the code:
let tid;
function reply_click(clicked_id){
console.log(clicked_id);
}
$('#searchnow').bind('click',
function (){
function kaldapiclass(){
// console.log("card");
var classSelect=$('#thisclass').val();
$.getJSON('https://us.api.blizzard.com/hearthstone/cards?
locale=en_US&access_token=hidden&class='+classSelect, function(data) {
$('#kortliste').empty();
$.each( data.cards, function(i, card) {
$()
$('#kortliste').append("<li id='" + card.id + "'><img src='" + card.image + "'><p>"+
card.name +"</p><button onclick='"+reply_click(card.id)+"'>HERE</button></li>");
});
});
};
clearTimeout(tid);
tid=setTimeout(kaldapiclass, 500);
});
ty for your time
-Morten

The code you entered will actually execute the function. So, instead of:
"<button onclick='"+reply_click(card.id)+"'>HERE</button>"
you should just define the element the way you would place it in dom:
"<button onclick='reply_click("+card.id+")'>HERE</button>"
Only the card.id should be dynamic.
I would also suggest to append html only once, this way:
var toAppend = '';
$.each( data.cards, function(i, card) {
toAppend += "<li id='" + card.id + "'><img src='" + card.image + "'><p>" + card.name + "</p><button onclick='reply_click(" + card.id + ")'>HERE</button></li>";
});
$('#kortliste').html( toAppend );

Javascript function not called in a dynamically generated page

I have a web application in which I am generating some HTML content based on the response to an AJAX call. In the HTML, I am creating some links with onclick() event wired to another Javascript function in the same page. But when the page loads and the links are generated in the final rendered HTML output, clicking on the links does not call the bound Javascript function. Am I doing anything wrong here? Can someone help me how to solve this issue?
Here's the Javascript function to generate the HTML code:
function getBotsStatus() {
$.post('/bot/status', {
}).done(function(bots_status) {
all_bots_status = bots_status['bots_status'];
$('#bots_table').html('');
for (var one_job in all_bots_status) {
var text = '';
if (all_bots_status[one_job] == 'running')
text = '<tr><td>' + one_job + '</td><td>' + all_bots_status[one_job] + '</td><td><a href=\'\' onclick=\'postStartBot(\'' + one_job + '\')\'>Start</a></td></tr>';
else if (all_bots_status[one_job] == 'stopped')
text = '<tr><td>' + one_job + '</td><td>' + all_bots_status[one_job] + '</td><td><a href=\'\' onclick=\'postStopBot(\'' + one_job + '\')\'>Start</a></td></tr>';
$('#bots_table').append(text);
}
}).fail(function() {
alert('Error');
});
}

Adding click handler on href for a tag is a bad practice.
You should consider of attaching event handler through on after td/a is created .
change your code to the following
function getBotsStatus() {
$.post('/bot/status', {}).done(function(bots_status) {
all_bots_status = bots_status['bots_status'];
$('#bots_table').html('');
for (var one_job in all_bots_status) {
var text = '';
if (all_bots_status[one_job] == 'running')
text = '<tr><td>' + one_job + '</td><td>' + all_bots_status[one_job] + '</td><td><a >Start</a></td></tr>';
else if (all_bots_status[one_job] == 'stopped')
text = '<tr><td>' + one_job + '</td><td>' + all_bots_status[one_job] + '</td><td><a >Start</a></td></tr>';
$('#bots_table').append(text);
$("$bots_table td").on('click','a',function(){
alert("here");
});
}
}).fail(function() {
alert('Error');
});
}
Hope it helps

You are using single quotes for the onclick and for the functions parameters, making the code invalid. You rendered html looks like this: (by your code)
onclick='postStartBot('JOBID')'
resulting in an invalid code, it should use different quotes for the function and the parameters. Try this:
onclick=\'postStartBot("' + one_job + '")\'
that will render in something like
onclick='postStartBot("JOBID")'
If one_job is numeric you don't need the double quotes either

Javascript Parameter Passing Not Working

The code dynamically creates a listview which works but i want to make it so when a listview item is clicked it sends the a url paramater to another method. When i set a paramater it doesnt alert the paramater, but when i give no parameter it works.
var output =
"<li onclick='openURL()'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above works - No parameter in openURL();
var output =
"<li onclick='openURL('" + results.rows.item(i).url + "')'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above doesnt work - I have done alert(results.rows.item(i).url) and it has a value.
function openURL(url) {
alert("opening url " + url);
}
Could someone explain what i'm doing wrong, i've been trying to solve the problem for hours.
Cheers!

You are using single quotes to open the HTML attribute, you can't use it as JavaScript String because you'll be closing the HTML attribute, use double quotes:
var output =
"<li onclick='openURL(\"" + results.rows.item(i).url + "\")'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";

How do I execute an event using jQuery through an html object(button) created through Javascript?

I'm just new here. So here's where I'm stuck:
I created an html table using javascript. I have a button,which when clicked, will create set of tables with exactly the same structure but the objects(eg. button, text) inside those tables have different ID's. Now when I try to execute a click function using jQuery with a button on one of the produced tables, it won't work. How do I go around here? Thanks in advance!
Here's a sample function which creates the html table(with unique ID's) in javascript:
function CreateTables() {
var html = ' ';
var valPrompt = prompt("How many tables would you like to add?");
parseInt(valPrompt);
for (i = 1; i <= valPrompt; i++) {
html += "<table>" + "<tr>" + "<td>" + "Text goes here" + "</td>" + "<td>" + "<input type='text' id='txtTEXT" + i + "'/>" + "</td>" + "<td>" + < input type = 'button'
id = 'btnALERT" + i + "' / > +"</td>" + "</tr>" + "</table>"
}
document.getElementById('HtmlPlaceHolder').innerHTML = html;
}​
So, if we review the code, Sets of table with buttons(btnALERT) with unique ID's will be created if the function CreateTables is executed. In order to select the objects, I suppose I'll be using jQuery. So for example, if I bind a handler in btnALERT1(produced by CreateTables) say a click function in order to alert a simple "Hello", how will I do this? My code for this doesn't seem to work:
$(document).ready(function() {
$('#btnALERT1').click(function() {
alert("Hello");
});
});​

Use .live() (for older jquery versions - < v1.7):
$('#btnALERT1').live('click', function()
{
alert("Hello");
});
Or:
$(document).delegate('#btnALERT1', 'click', function()
{
alert("Hello");
});
Use .on() (for new jquery versions - >= 1.7):
$(document).on('click', '#btnALERT1', function()
{
alert("Hello");
});

I think you may want to use the method .on():
$(document).ready(function() {
$('#btnALERT1').on('click', function() {
alert("Hello");
});
});
For more information, check the online doc: http://api.jquery.com/on/

I would use a delegate on HtmlPlaceHolder to check for click events like so:
$("#HtmlPlaceHolder").on("click", "input[type=button]", function() {
alert($(this).attr("id"));
});
Also, I would change the button id scheme to btnALERT_1, so you can extract the ID number with a .split("_") method.

You have to attach the event handlers after you create the tables, not when the document is ready (the document should be ready anyways since the user is interacting with it).
You can do this with jQuery, sure, but have a look at the native methods - jQuery might be too bloated depending on what you will do and you will learn something about the DOM.
I've added some code below which lets you add a callback and shows some things you can get back easily. It is not exactly what you asked for, but a great start to finding your way in the DOM.
function CreateTables() {
var html = ' ';
var valPrompt = prompt("How many tables would you like to add?");
parseInt(valPrompt);
for (i = 1; i <= valPrompt; i++) {
html += "<table>" + "<tr>" + "<td>" + "Text goes here" + "</td>" + "<td>" + "<input type='text' id='txtTEXT" + i + "'/>" + "</td>" + "<td>" + < input type = 'button'
id = 'btnALERT" + i + "' / > +"</td>" + "</tr>" + "</table>"
}
var placeholder = document.getElementById('HtmlPlaceHolder').innerHTML = html;
placeholder.innerHTML = html;
placeholder.addEventListener('click', function (e) {
console.log(this, e);
}
}​

Dynamically add jQuery event

I'm trying to dynamically add buttons, and add a jQuery listening even to them.
However, I'm having troubles with JavaScript's scoping (at least I think that's it is).
This is pretty much my code:
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click(function() {
alert("Hello from " + item);
});
}
Now the problem is that no matter which button I click, the alert inside the event callback always uses the last item.
Now I understand why this is happening (well, roughly :P), but how I can fix it?

one way of achieving this correctly is like so
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
(function(item){
$('#id' + item).click(function() {
alert("Hello from " + item);
});
})(item);
}
here is a jsfiddle to demonstrate http://jsfiddle.net/reefbarman/bbP64/

You can use jQuery's $.each method to iterate over the group array in the same way, but this will solve the issue for you:
$.each(group,function(i,v){
$('div').append("<input type='button' value='" + v + "' id = 'id" + v + "'>");
console.log($('#id' + v))
$('#id' + v).click(function() {
alert("Hello from " + v);
});
});
http://jsfiddle.net/ebiewener/byV9X/

I would look in to using the jQuery Delegate function.
http://api.jquery.com/delegate/
That will attach an event handler to a container. All the element events in the container will trickle up to the container and if handled will trigger the event handler.

It works for me: http://jsfiddle.net/bgt89/ but i did change your handler to use closures.
var group = ['asdf', 'rere', 'eeeee']
$(document).ready(function() {
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click((function(item) {
return function() {
alert("Hello from " + item);
}
})(item));
}
});

Most of answers above are correct, but unnecessarily verbose. "this" is your friend.
for (item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click(function() {
alert("Hello from " + this.id.slice(2) );
});
}

The easy ways: pass some event data:
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click({item: item}, function(event) {
alert("Hello from " + event.item);
});
}
Or use event.target or this:
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click(function(event) {
alert("Hello from " + event.target.id); //or this.id
});
}

I think everything is OK in your code except for using the item variable in the alert() statement.
Since the alert runs long after the for loop has finished, the alert will see the last value for item, not the one you want. If you just want to access the currently clicked on items ID, then you can just get that from the this reference rather than passing it in. Try changing your code to this:
for (var item in group) {
$('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
$('#id' + item).click(function() {
alert("Hello from " + this.id.slice(2));
});
}
Works here in this jsFiddle: http://jsfiddle.net/jfriend00/uyK3m/

Harmen,
Why not you jquery's live function.
It allows you to bind a function to an event on a set of objects with the jquery selector just like $('#button').click() does but also allows new elements that are appended in the future to also work with the click event. This would fit your dynamically requirement.
See the example below. I use the live function to bind click event to all elements that are a class 'testButton'. Then to get the value use the attr('value') on the $(this) because this is the element clicked.
var group = ["Test 1", "Test 2", "Test 3"];
for (var item in group) {
$('div').append("<input class='testButton' type='button' value='" +item+ "'>");
}
$('.testButton').live('click', function(e) {
alert('Hello Im From ' + $(this).attr('value'));
});
Jquery Live Function : http://api.jquery.com/live/
Working Example : http://jsfiddle.net/bbP64/12/
Hope that helps.