jquery onclick 设置段落/文本框值

Question

我有无序列表的链接，我正在尝试获取单击的链接文本。 因此，当我单击某个链接时，我想在单击的列表文本底部的段落或文本框中显示。 因此，如果我有这样的内容：

1. item1
2. item2
3. item3

如果我单击 item2 我希望得到这样的结果：“您刚刚单击了：item2 ”

我用这个来管理它：

jQuery(function () {
    $('a').click(function () {
        alert('Text is: ' + $(this).text());
    });
});

但这正在显示一条警报消息。然后我这样做：

jQuery(function () {
    $('a').click(function () {
        var name = $(this).text();
        $("p#selector").text(name); 
        $("input#textbox").val(name);
    });
});

它可以将链接的文本值发送到段落，但它消失得很快，它显示大约第二秒就消失了，有什么办法可以防止这种情况吗？为了阻止它消失？

Answer 1

试试这个：

jQuery(function () {
    $('a').click(function (e) {
        e.preventDefault();
        var name = $(this).text();
        $("#selector").text(name); 
        $("#textbox").val(name);
    });
});

e.preventDefault()将阻止链接执行默认情况下正在执行的任何操作（这听起来像是它可能正在刷新页面......）。

这是一个演示。

我还修改了您的选择器 - p#selector 效率低下，您应该在按 ID 选择时简单地使用 #selector，如 jQuery API。

对于 id 选择器，jQuery 使用
JavaScript 函数
document.getElementById()，即
非常高效。当另一个
选择器附加到 id
选择器，例如 h2#pageTitle、jQuery
之前执行附加检查
将元素识别为匹配项。

编辑：很明显，点击处理程序不是您所需要的，请尝试以下解决方案：

使用 jQuery URL Parser，然后找到该URL对应的链接并获取文本：

var url = "one.htm";
var linktext = $("a[href='" + url + "']").text();
$('#output').text(linktext);

该部分的工作演示（只需进行 URL 解析，而不是手动设置 URL）。

Answer 2

尝试通过从函数返回 false 来阻止单击事件在处理后传播。

jQuery(function() {
    $('a').click(function () {
        var name = $(this).text();
        $("p#selector").text(name); 
        $("input#textbox").val(name);
        return false;
    });
});

编辑1：这在功能上与@Town提供的答案相同，@Town比我先一步

编辑2：return false不是相当与.preventDefault()相同（它可以防止默认事件发生，但不会阻止其他注册处理程序触发）或实际上.stopPropagation() （这会停止事件“冒泡”并阻止 DOM 上层的处理程序触发）。返回 false 会导致 但是 正如 @Town 所说，如果处理程序在返回之前出错，则会发生默认事件。

基本上...按他说的做。