Javascript jQuery 锚点 preventDefault

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3786898/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 06:09:42  来源:igfitidea点击:

jQuery anchor preventDefault

javascriptjquery

提问by oshirowanen

Using jQuery, how do I get the value from a textbox and then load a new page based on the value?

使用 jQuery,如何从文本框中获取值,然后根据该值加载新页面?

For example, lets say the textbox contains "hello" on page1.php, how do I change the default behavior of an anchor tag to now load the following

例如,假设文本框包含 page1.php 上的“hello”,我如何更改锚标记的默认行为以现在加载以下内容

page2.php?txt=hello

page2.php?txt=你好

I have the following so far:

到目前为止,我有以下几点:

<script type="text/javascript">
    $(document).ready(function(){
    $("a.mylink").click(function(event){
        alert("link clicked");
        event.preventDefault();
    });
});
</script>

回答by Praveen Prasad

Html

html

    <input type="text" id="demoQuery" />
    <a id='demoLink' href='javascript:'>Iam a link</a>

Javascript

Javascript

jQuery('#demoLink').bind('click',function(e){
      e.preventDefault();
      document.location.href="someUrl.php?text="+ jQuery('#demoQuery').val();     
});

回答by djdd87

You can use the blurevent of the text box, so after the user has finished typing the anchor can be updated using the following jQuery:

您可以使用文本框的模糊事件,因此在用户完成输入后,可以使用以下 jQuery 更新锚点:

$("#textBoxId").blur(function() {
    var text = $(this).val();
    var end = text.length == 0 ? "" : "?txt=" + text;
    $("a.mylink").attr("href", "Page2.php" + end);
});

And just change the href of the anchor. Then you don't need to handle the anchor clickyourself. The anchor will just redirect to "Page.php?txt=Hello". And this will ensure that the link is always up to date and will work if the user right clicks and selects open in new window.

只需更改锚点的 href 即可。那么你就不需要自己处理锚了click。锚点只会重定向到“Page.php?txt=Hello”。这将确保链接始终是最新的,并且在用户右键单击并选择在新窗口中打开时将起作用。

Or you could do it the other way around and handle the click of the anchor:

或者你可以反过来做并处理锚点的点击:

$("a.mylink").click(function(e) {
   var text = $("#textBoxId").val();
   document.location.href = $(this).attr("href") + "?txt=" + text;
   e.preventDefault();
});

But if the user right clicks, this event will not fire.

但是如果用户右键单击,则不会触发此事件。

回答by John Strickler

Set a click event on the anchor tag to add the query string when it is clicked.

在锚标签上设置点击事件,在点击时添加查询字符串。

$('a').click(function() {
   var querystring = $('input').serialize();
   this.href += querystring;
});

This uses jQuery's serializemethod. Where the selector is every input or field you want to pass the field to the next page. Good luck!

这使用了 jQuery 的序列化方法。选择器是您想要将字段传递到下一页的每个输入或字段。祝你好运!

No need to use event.preventDefault.

无需使用 event.preventDefault。