Building html output with a input checkbox with javascript

Question

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 1

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