Question

我在列表页面上有两个jquery脚本。第一个使列表行可单击。它工作正常。

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(".clickableRow").click(function(e) {
            console.log('clickable row clicked');
            window.document.location = $(this).attr("href");
        });
    });
</script>

第二个是搜索功能，可以过滤行，也可以正常工作。

<script type="text/javascript">

    jQuery(document).ready(function() {
        $("#search-filter").click(function (evt) {
            evt.preventDefault();
            console.log('evt triggered');
            q=$('#q').val();
            q_fields=$('#q-fields').attr('value');
            $.ajax({
                type: 'GET',
                url: $(this).attr("href"),
                datatype: 'html',
                data: {'q': q,
                    'q_fields': q_fields,
                    'title': $('#title').text()},
                success: function(code_html, status) {
                    $('#object-list').children().remove();
                    $(code_html).appendTo('#object-list');
                },
                error: function(result, status, error) {
                    alert(result);
                }
            });
        });
    });
</script>

它由以下形式激活：

<form method="get" action="">
    <input id="q" type="text" name="q">
    <input id="q-fields" type="hidden" value="name, prenom" name="q_fields">
    <button id="search-filter" class="btn" type="submit" href="/contacts/ajax_update_contact_list">search</button>
</form>

这个lattest脚本是一个过滤行的搜索功能，它工作正常。问题是当我的行被过滤时，第一个脚本不再起作用了。

<tr class="clickableRow" href="/contacts/532/">
    <td></td>
    ...
</tr>
<tr class="clickableRow" href="/contacts/533/">
    <td></td>
    ...
</tr>

我甚至没有收到控制台信号“clickableRow clicked”。我一定有些不对劲但我看不清楚。

Answer 1

尝试点击进入函数并在完成加载ajax后重新调用

＆＃13;

<script type="text/javascript">
    jQuery(document).ready(function($) {
        clickController();
    });
    function clickController()
    {
        $(".clickableRow").click(function(e) {
            console.log('clickable row clicked');
            window.document.location = $(this).attr("href");
        });

        $("#search-filter").click(function (evt) {
            evt.preventDefault();
            console.log('evt triggered');
            q=$('#q').val();
            q_fields=$('#q-fields').attr('value');
            $.ajax({
                type: 'GET',
                url: $(this).attr("href"),
                datatype: 'html',
                data: {'q': q,
                    'q_fields': q_fields,
                    'title': $('#title').text()},
                success: function(code_html, status) {
                    $('#object-list').children().remove();
                    $(code_html).appendTo('#object-list');
                    clickController(); // re-call function in here
                },
                error: function(result, status, error) {
                    alert(result);
                }
            });
        });

    }
</script>

＆＃13;

页面中的更改后，jquery单击脚本未激活

1 个答案: