Question

我想在鼠标输入时看到标签的标题，我想用ajax方法获取标题文本。我的HTML代码如下：

<div id="class">
     <label id="cost">@Html.DisplayFor(modelItem => item.PriceId)</label>
</div>

这是我的jquery代码：

$("#cost").live("mouseenter", function () {
    $.getJSON('/Price/AjaxGetByPriceId', { id: $(this).val() }, function (data) {
        for (i = 0; i <= data.length; i++) {
            $(this).attr("title", data[i].Url);
        }
    });
});

这是我的价格控制器中的代码：

[HttpGet]
public ActionResult AjaxGetByPriceId(int id)
{
    var price = priceApp.GetByPriceId(id);

    return Json(price, JsonRequestBehavior.AllowGet);
}

但是输入鼠标后没有发送请求。有什么问题？

Answer 1

Html.DisplayFor()生成文本，而不是输入字段。因此，您不应使用$(this).val()方法，而应使用$(this).html()。此外，由于您的控制器需要一个整数参数，因此请确保此文本实际上表示一个整数，否则您的控制器操作将不会被命中，并且您将收到一条错误消息，指出该值无法解析为数字。同样在AJAX成功回调this内部不再引用mouseenter回调中使用的元素。如果要使用它，应该在闭包中捕获它：

$("#cost").live("mouseenter", function () {
    var $label = $(this);
    var id = $label.html();
    alert(id); // this should be a number

    $.getJSON('/Price/AjaxGetByPriceId', { id: id }, function (data) {
        for (i = 0; i <= data.length; i++) {
            $lavel.attr("title", data[i].Url);
        }
    });
});

我还建议您使用.on()函数替换.live函数（已完全弃用，甚至在jQuery 1.9中删除）。除此之外，我建议您使用网址助手为您的控制器操作生成网址，而不是像您一样对其进行硬编码。

还有一句话：看起来你所展示的div是在一个foreach循环中（我可以通过你所使用的modelItem => item.PriceId lambda来判断item是你当前的项目环）。但问题是你的DOM中不能有多个具有相同id的元素。所以你所展示的是无效的标记。您可以使用class选择器代替：

<div>
     <label class="cost" data-url="@Url.Action("AjaxGetByPriceId, Price")">
         @Html.DisplayFor(modelItem => item.PriceId)
     </label>
</div>

然后：

$(document).on('mouseenter', '.cost', function () {
    var $label = $(this);
    var id = $label.html();
    var url = $label.data('url');
    $.getJSON(url, { id: id }, function (data) {
        for (i = 0; i <= data.length; i++) {
            $label.attr('title', data[i].Url);
        }
    });
});

另外，我不太清楚为什么要循环使用AJAX回调：

for (i = 0; i <= data.length; i++) {
    $label.attr('title', data[i].Url);
}

您的控制器操作是否应该返回具有指定ID的相应标签的标题？那会更正确。

Answer 2

我不确定，但在this选项中使用$(this).val()之前，可能值得保存getJSON的上下文。 this可能不再引用该元素。

在您执行$(this).val()之前，我只保存getJSON的值。

如何使用jQuery AJAX为标签设置标题？

2 个答案: