javascriptによる入力チェックボックス付きhtml出力の作成

Question

文法的にdivに配置される文字列を作成しています。私は入力チェックボックスのonclick属性を呼び出して、ちょっとした問題を抱えようとしています。私は各チェックボックスのクリックで一意のIDを渡そうとしています。以下のコードは私が使っているものです。問題については、以下を参照してください：

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

authorCheckboxclick機能では、私はvar answerid = $(this).attr('id');を置く場合、私は未定義得ます。

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

私のjQuery呼び出しがうまく機能せず、JavaScriptが有効な理由はありますか？ id値を接合部に送るのがベストプラクティスですか？私はオレンジとリンゴを混合していますか？どの方法がより速く表示されますか？

Answer 1

あなたの問題を直ちに解決するには、関数内でthisキーワードを使用していることです。 on*属性から関数を呼び出すとき、関数のスコープはwindowであり、イベントを発生させた要素ではありません。これを修正するには、パラメータで指定した要素、つまり$(this)の代わりに$(elem)

もっと良い解決策は、あなたがしようとしているようにthisキーワードを利用できる、控えめな委任イベントハンドラを使用することです。また、より洗練されたHTMLコードを残し、より良い分離をもたらすという利点もあります。これを試してみてください：

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

の