Question

使用新数据对div标签进行Ajax刷新后，

在这里，我尝试使用以下代码获取单选按钮[已选中]的值。

HTML之前：

<div id="summery">

</div>

jQuery Block 1：

       $.ajax({
                url: site_addr + '/new_row_rec',
                type: 'POST',
                success: function (res) {
                    /** If error is hit, then redirect */
                    if (res.error_url) {
                        location.reload(res.error_url);
                    }
                    $('#summery').html(res);
                }
            });

HTML：

    <div id="summery">
      <input type="radio" name="payment_type[]" class="payment_type"
                                               value="A">

      <input type="radio" name="payment_type[]" class="payment_type"
                                               value="B">
    </div>

jQuery Block 2：

$('.payment_type').on('click', function () {
   var row = $('input[name="payment_type"]:checked').val();
   console.log('Row : ' + row)
 }

我收到错误：

 Row : undefined

此处首先执行 jQuery Block 1 并加载html内容。之后， jQuery Block 2 由单选按钮的点击事件运行。

我认为存在元素绑定问题，是这样的。那么这个解决方案是什么？

或

刷新后获取单选按钮值的任何其他方法。

注意：主页上的jQuery事件触发器到新加载的页面。

Answer 1

假设从ajax添加了.payment_type，请尝试使用

 $('body').on('click','.payment_type',function () {
   var row = $('input[name^="payment_type"]:checked').val();
   console.log('Row : ' + row)
 }

Answer 2

更改 jQuery Block 2 ，如下所示：

$(document).on('click', '.payment_type', function () {
   var row = $('input[name="payment_type[]"]:checked').val();
   console.log('Row : ' + row);
}

由于您的AJAX请求，您的DOM发生了更改，因此以前绑定的事件侦听器不再正确。您必须将事件侦听器绑定到文档。

Answer 3

您的private View root = null; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { if (root != null) { return root; } root = inflater.inflate(R.layout.fragment_search, container, false); final SearchView searchView = (SearchView) root.findViewById(R.id.searchView); searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() { @Override public boolean onQueryTextSubmit(String query) { return false; } @Override public boolean onQueryTextChange(String newText) { Toast.makeText(getActivity(), "text changed.", Toast.LENGTH_SHORT).show(); return true; } }); return root; } s名称为input，因此jQuery语句应为：

payment_type[]

结果：

在Ajax Refresh之后，元素无法正常工作

3 个答案: