2

私は自分のサイトのたくさんのリンクにイベントリスナーを作成しようとしています。これらのリンクはループ内で生成されるため、最終的には<a class = "replyButton" id = "replyID"<? echo $x; ?>etcになります。

以下のコードを使用して、それぞれのリンクがクリックされたときに入力ボックスを表示しようとしていますが、運がありません。ある場合には、プレーンJSを使用して動作させることができますが、JQueryを使用せずに、このようにいくつかに外挿します。どんな助けでも本当に素晴らしいでしょう。

window.onload = function(){

    $('.replyButton').each(function(index){
    var domElementId = "replyArea" + index;
    domElementId.onclick = function() {
    var replyFieldHtml = '<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>';  
    document.getElementById('domElementId').innerHTML = replyFieldHtml;
    console.log('domElementId');
    return false;
    }
}); 
}

編集：これは、htmlを生成するために使用するループです... $ x = 0; while（$ x <8）{$ x ++; $ r = $ wallarray-$ x;

$postContent = $wall_content['wall_posts'][$x-1];
$postUser = getUserNameById($wall_content['userID'][$x-1]);
?>

<div class = "row">
    <div class = "span6">
        <div class = "span1" id = "wallPhoto"><img src ="assets/img/usr/profile_holder.jpg></div>
        <div class = "span4">
            <div class = "span4" id = "wallFeedStyle"><a id = "wallUserLink" href = "#"><b><? echo $postUser; ?></b></a></div>
        <div class = "row">
            <div class = "span5">
                <div class = "span4" id = "userPost"><? echo $postContent; ?></br><p class = "wallsmall"><a href="#" id = "postLike"></i>Like</a> &middot;<a class = "replyButton" id = "replyButton<? echo $x; ?>" href="#"></i>Reply</a></p></div></div>
            </div>
            <div class = "row">
                <div class = "span5">
            </div>
        </div>  
        <div class = "row" id = "replyArea<? echo $x; ?>"></div>
</div>
<? 
}
?>
4

2 に答える 2

4

変数の使い方が間違っています。これを試して：

window.onload = function () {
    $('.replyButton').each(function (index) {
        var domElementId = "replyArea" + index;
        $('#' + domElementId).on('click', function () {
            var replyFieldHtml = '<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>';
            $(this).html(replyFieldHtml);
            console.log(domElementId);
            return false;
        });
    });
}
于 2013-02-02T08:51:37.323 に答える
0

.on() と .bind() の背後にある歴史を深く掘り下げた後、以下のコードを使用してこれを解決しました。ご助力いただきありがとうございます！

$('a.replyButton').on("click", function(){
var index = $(this).attr('id');

$('#replyArea'+index).html('<div class = "span4" id = "replyTextField"><table><tr><td id = "replyPhoto"><img src = "/assets/img/usr/profile_holder.jpg" /></td><td id = "replyContent"><input type = "text" id = "replyInput" onkeydown="if (event.keyCode == 13) wallReply()" placeholder = "leave a reply..." /></td></tr></table></div>');
});

「replyLink」ID属性を数字だけに変更することになりました。そのため、replyButton クラスと ID 属性を数値として持つ /<.a> がたくさんありました。.each() ループもセットアップする必要はありません。

于 2013-02-03T08:07:35.807 に答える