user1314159 user1314159 - 20 days ago 7
Javascript Question

Building html output with a input checkbox with javascript

I'm building a string that will be place in a div pro grammatically. I am trying to call the

onclick
attribute of the input checkbox and having a little bit of trouble. I am trying to pass a unique value id with each checkbox click. The code below is what I'm using. See below for the problem:

var count = 1;
$.each(JSON.parse(data.d), function (k, v) {
var searchName = v.searchName;
resultString += "<div class='row form-group'>";
resultString += "<div class='col-sm-1 right-content'><input type='checkbox' onclick = 'authorCheckboxclick(this)' id='" + searchName + "'></div>";
resultString += "<div class='col-sm-11'>";
resultString += "<span>";
//resultString += v.text
resultString += count + ". " + v.text
resultString += "</span>";
resultString += "<br />";
resultString += "<span>";
//resultString += "Consectetur adipisicing, Consequatur, 2015.";
resultString += "</span>";
resultString += "</div>";
resultString += "</div>";
//resultString += "<br><br>";
count++;
});


In the
authorCheckboxclick
function if I put
var answerid = $(this).attr('id');
I get undefined.

function authorCheckboxclick(elem) {
var answerid = $(this).attr('id');
alert(answerid); //I get undefined
var answerid = $(this).attr(elem.id);
alert(answerid); //I get undefined
var answerid = $(this).attr(elem.id);
alert(answerid); //I get undefined
var searchTerm = elem.id;
alert(searchTerm); //I get proper value
searchTerm = searchTerm.substring(0, 3);
alert(searchTerm); //I get proper value
var answerid = $(this).attr(elem.id);
alert(answerid); //I get undefined


var search = searchTerm.toUpperCase();
var array = jQuery.grep(dataMembers, function (value) {
return value.toUpperCase().indexOf(search) >= 0;
});


Is there a reason my jQuery call is not working and my JavaScript is? Is there a best practice to send the id value to a junction? Am I mixing Apples with Orange? Which method show be faster?

Answer

The immediate solution to your problem is that you're using the this keyword in your function. As you are calling the function from an on* attribute the scope of the function will be the window, not the element that raised the event. To fix this, simply use the element you provide in the parameter, ie. $(elem) instead of $(this).

A better solution entirely would be to use an unobtrusive delegated event handler which can utilise the this keyword as you're attempting to. It also has the benefits of leaving cleaner HTML code and being a better separation of concerns. Try this:

var count = 1;
$.each(JSON.parse(data.d), function(k, v) {
  var searchName = v.searchName;
  resultString += '<div class="row form-group">' +
    '<div class="col-sm-1 right-content"><input type="checkbox" id="' + searchName + '"></div>' +
      '<div class="col-sm-11">' +
        '<span>' + count + ". " + v.text + '</span><br />' +
        '<span></span>' +
      '</div>' +
    '</div>';
  count++;
});

$(document).on('change', '.row :checkbox', function() {
  var answerid = this.id;
  var search = searchTerm.toUpperCase();
  var array = jQuery.grep(dataMembers, function(value) {
    return value.toUpperCase().indexOf(search) >= 0;
  });
});