onclick将ajax自动生成的表中的内容附加到输入字段

时间:2016-06-10 10:32:57

标签: jquery ajax bootstrap-modal

我在将ajax自动生成的表中的内容附加到名为" tar"的输入字段时遇到问题。在这段代码中

<script>
$(document).ready(function () {
    $('#mela').on('show.bs.modal', function (e) {
        $('#target').html();
        $.ajax({
            type: 'get',
            url: '<?php echo $this->Html->url(array('action' => 'getProducts', 'ext' => 'json')); ?>',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            },
            success: function (response) {
                if (response.error) {
                    alert(response.error);
                    console.log(response.error);
                }
                if (response.content) {

                    var arr = response.content;
                    var out = "<table>";
                    var i;
                    for (i = 0; i < arr.length; i++) {
                        out += "<tr>" +
                                "<td class='t1'>" +
                                arr[i].Product.image +
                                "</td>" +
                                "<td>" +
                                "<a href='#' class='quantum'>" +
                                "<img src='../../images/small/" + arr[i].Product.image + "' width='50px' height='50px'> " +
                                "</a>" +
                                "</td>" +
                                "<td>" +
                                "<a href='#' class='quantum'>" +
                                arr[i].Product.product_name +
                                "</a>" +
                                "</td>" +
                                "</tr>";
                    }
                    out += "<table>";
                    $('#target').html(out);
                }
            },
            error: function (e) {
                alert("An error occurred: " + e.responseText.message);
                console.log(e);
            }
        });
    });
});

每次单击按钮后显示引导模式时,上面的脚本都会生成此显示,如下图所示 enter image description here

然而,每当我点击任何类别为#34;量子&#34;这里没有填充我的输入id =&#34; tar&#34;。事实上,它甚至不会生成包含任何类型字符串的警报。

<script>
    $(document).ready(function () {
        $('.quantum').on('click', function () {
            alert('test');
            var t1 = $(this).closest('tr').find('.t1').text();
            document.getElementById('tar').value = t1;
            $('#mela').modal('hide');
            return false;
        });
    });

</script>

1 个答案:

答案 0 :(得分:0)

我能够使用此代码解决问题:

<script>
     $(document).on( 'click', '.quantum', function(){
           alert('test');
     });
</script>

也称为动态创建元素的事件绑定,而不是此

$(document).ready(function () {
    $('.quantum').on('click', function () {
        alert('test');
    });
});