解析$（document）.on中的变量（＆＃34;点击＆＃34;，<id-variable>，函数）</id-variable>

Question

我有一个HTML代码，可以从JSON中提取变量：

         <textarea id="{{textarea_id}}" class="comment-insert-text" style = "border: 1px solid #e1e1e1"></textarea>
                        </div>
                        <div id="{{btn_id}}" style = "margin: 2px 2px 0 0;width:26px;height: 25px;"class="comment-post-btn-wrapper">
                        C
                        </div>

id的变量也存储在隐藏的临时变量中：    

我想将这些变量解析为执行onclick函数的javascript文件。该函数接受id变量，该变量并不总是静态的。这个动态变量是一个，通过JSON传递给临时变量：

$(document).ready(function() {

    $(document).on("click",<id-name to be resolved here> , function() {
        alert("yes");
        comment_post_btn_click();
    });



    $(document).on("click", "#comm_first_1", function() {
        $('.comment-insert-text').css('border', '1px solid #e1e1e1 ');
    });

});





function comment_post_btn_click()
{

    var _tt = $('#textarea_id').val();
    alert("in");
    //Text within the textarea which the person has entered
        var _comment = $('<id-name variable>').val();

    var _Userid = 1;
    //   Hard coded the name, should be a session name like $('#Userid').val()
    var _Username = "Username_sagar";
    //   Hard coded the name, should be a session name like $('#Username').val()
    if (_comment.length > 0)
    {
        // proceed with ajax callback
        $("#comm_first_1").css('border', '1px solid #e1e1e1');

        $.post("comment_insert.php",
                {
                    task: "comment_insert",
                    Userid: _Userid,
                    comment: _comment
                }
        )
                .error(
                        function()
                        {
                            console.log("Error: ");
                        }

                )
                .success(
                        function(data)
                        {
                            //sucess
                            //insert html into the ul/li
                            comment_insert(jQuery.parseJSON(data)); // converts the text which we receive into a javascript object
                            console.log("ResponseText: " + data);


                        }
                );
        console.log(_comment + "Username: " + _Username + "Userid: " + _Userid);
    }
    else
    {
        // the textarea is empty, put a border on it
        $('.comment-insert-text').css('border', '1px solid #ff0000');
        console.log("The textarea is empty");

    }

    //remove the textarea and ready for another comment
    $('#comm_first_1').val("");

}

function comment_insert(data) {

    var t = '';
    t += '<li class="comment-holder" id="_' + data.comment_id + '">';
    t += '<div class="user-img">';
    t += '<img src="' + data.profile_img + '" class="user-img-pic" />';
    t += '</div>';
    t += '<div class="comment-body">';
    t += '<h3 class="username-field" >' + data.Username + '</h3>';
    t += '<div class="comment-text">' + data.comment + '</div>';
    t += '</div>';
    t += '<div class="comment-buttons-holder">';
    t += '<ul>';
    t += '<li class="delete-btn">[x]</li>';
    t += '</ul>';
    t += '</div>';
    t += '</li>';

    $('.comments-holder-ul').prepend(t);
}

Answer 1

您只需将click事件添加到类中，而不是id，然后将this对象传递给函数。

$(document).ready(function() {

        $(".comment-insert-text").click(function() {
            alert("yes");
            comment_post_btn_click(this);
        });



        $(document).on("click", "#comm_first_1", function() {
            $('.comment-insert-text').css('border', '1px solid #e1e1e1 ');
        });

    });





    function comment_post_btn_click(textArea)
    {

        var _tt = $('#textarea_id').val();
        alert("in");
        //Text within the textarea which the person has entered
            var _comment = $(textArea).val();

        var _Userid = 1;
        //   Hard coded the name, should be a session name like $('#Userid').val()
        var _Username = "Username_sagar";
        //   Hard coded the name, should be a session name like $('#Username').val()
        if (_comment.length > 0)
        {
            // proceed with ajax callback
            $("#comm_first_1").css('border', '1px solid #e1e1e1');

            $.post("comment_insert.php",
                    {
                        task: "comment_insert",
                        Userid: _Userid,
                        comment: _comment
                    }
            )
                    .error(
                            function()
                            {
                                console.log("Error: ");
                            }

                    )
                    .success(
                            function(data)
                            {
                                //sucess
                                //insert html into the ul/li
                                comment_insert(jQuery.parseJSON(data)); // converts the text which we receive into a javascript object
                                console.log("ResponseText: " + data);


                            }
                    );
            console.log(_comment + "Username: " + _Username + "Userid: " + _Userid);
        }
        else
        {
            // the textarea is empty, put a border on it
            $('.comment-insert-text').css('border', '1px solid #ff0000');
            console.log("The textarea is empty");

        }

        //remove the textarea and ready for another comment
        $('#comm_first_1').val("");

    }

    function comment_insert(data) {

        var t = '';
        t += '<li class="comment-holder" id="_' + data.comment_id + '">';
        t += '<div class="user-img">';
        t += '<img src="' + data.profile_img + '" class="user-img-pic" />';
        t += '</div>';
        t += '<div class="comment-body">';
        t += '<h3 class="username-field" >' + data.Username + '</h3>';
        t += '<div class="comment-text">' + data.comment + '</div>';
        t += '</div>';
        t += '<div class="comment-buttons-holder">';
        t += '<ul>';
        t += '<li class="delete-btn">[x]</li>';
        t += '</ul>';
        t += '</div>';
        t += '</li>';

        $('.comments-holder-ul').prepend(t);
    }