Question

我试图获得一个按钮来运行AJAX以在MySQL上更新我的数据库，然后触发一个JQuery函数来加载（基本上刷新）另一个文件，从而不需要页面刷新。我对JQuery和AJAX相当陌生，所以我做错了。我已经获得了AJAX来更新数据库，但是JQuery似乎只在注册第二次单击。

我已经通过Stack Overflow搜索了很多，但是没有发现任何对我有用的东西。我找到的最常见的解决方案是：

$('#display_details').on('click', '.addpa1', function() {
        $('#display_details').load('project_member_list.php');
});

这对我不起作用（或者我使用不当）。

jQuery

$(document).ready(function(){
    $('.editProject').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.addpa1').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.addpa2').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.rempa2').click(function(){
        $('#display_details').load('project_member_list.php');
    });
    $('.rempa1').click(function(){
        $('#display_details').load('project_member_list.php');
    });
   })

HTML

<a name='addpa1' href='#' class='btn btn-success btn-sm addpa1' id='User.1' role='button' data-proid='2' title='Make PA #1' data-toggle='tooltip'>Make PA #1</a> 
<div id="display_details"></div>

我举了一个例子来限制混乱。其余部分与单击功能附带的类名相同。

其他JS

$( document ).ready(function() {

$( "#showToast" ).click(function() {
$('.toast').toast('show');
});

});

$('#modal').on('shown', function () {
   $("#modal-content").scrollTop(0);
});

我必须单击两次以注册JQuery。

Answer 1

我知道了。我为每个按钮调用了两个单独的函数（一个用于AJAX，另一个用于JQuery）。将JQuery函数内容放入AJAX函数即可解决此问题。

感谢所有在此问题上帮助我的人！

Answer 2

您是否曾经研究过Prevent Default个事件的onclick特性？

有时，默认设置可能会导致奇怪的行为，例如不适用于首次点击。

您可以尝试将onclick事件更改为以下内容（每个onclick）：

$(document).ready(function() {
  $('.addpa1').on('click', (event) => {
    event.preventDefault();
    $('#display_details').load('project_member_list.php');   
  });
})

或者类似这样的东西：

$(document).ready(function() {
      $('.editProject').click(function(event) {
        event.preventDefault();
        $('#display_details').load('project_member_list.php');
      });
    });

在此处{@ {3}}

了解有关防止默认设置的信息。

我认为还应该注意 ARIA合规性-event.preventDefault()

的这一部分

这被视为“不符合规定的示例” ：

<a href="#"
     role="button"
    >
  Show alert
</a>

因此，您的示例有可能在ARIA方面存在语义问题。

让我知道是否有帮助？

Answer 3

我想知道在尝试单击该元素之前，该元素是否未附加到dom。您可以在下面尝试一下，看看是否可以一键操作，是否可以获取console.log？

public class Main extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn = (Button) findViewById(R.id.btn);
        final TextView tv = (TextView) findViewById(R.id.tv);
        final EditText et = (EditText) findViewById(R.id.et);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String country = et.getText().toString();
                tv.setText("Your inputted country is : " + country);
            }
        });
 }
}

如果您console.log完成请求，会发生什么？见上文。

jQuery不会在第一次点击时触发，而是在第二次点击时触发

3 个答案: