jquery模板锚标签点击答案

【问题标题】：Jquery template anchor tag clickjquery模板锚标签点击
【发布时间】：2013-07-30 14:45:00
【问题描述】：

所以我有这个 jquery 模板，我需要在点击这个锚标记时调用 jquery 或 javascript 函数。我已经尝试了几种不同的方法。

<a href="yourfunction()"

我试过了

$('#number').click(function(e){

因此，如果有人可以提供帮助，我们将不胜感激。有问题的锚标记是具有 number id 的电话号码一。

   @model OpenRoad.Web.Areas.Marketing.Models.MobyNumberSelectionModel
@{
    ViewBag.Title = "Moby Number Selection";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section scripts {
<script type ="text/javascript">


        $('#number').click(function (e) {
            alert('test');
        });
    });
    mixpanel.track("View Marketing | Moby | Number Selection");
    //$(document).on("click", "#number", function (e) {
    //    event.preventDefault();
    //    alert('test');    });
    //$('#number').click(function (e) {
    //    Alert('test');
    //});
</script>
    }

<label class="lgform" style="text-align: left; padding: 10px 0;">Select state and area code:</label>
@Html.DropDownListFor(m => m.State, OpenRoad.Web.Helpers.DropDownLists.GetOptionValues("States", Model.State),
new { @class = "ddtrigger", data_url = "/Marketing/Moby/GetAreaCodes", data_template = "areaCodeTemplate", data_target = "AreaCode" })
@Html.DropDownListFor(m => m.AreaCode, (IEnumerable<SelectListItem>)ViewData["AreaCodes"],
    new { @class = "ddtrigger", data_url = "/Marketing/Moby/GetPhoneNumbers", 
        data_template = "phoneNumberTemplate", 
        data_target = "phoneNumbers", 
        data_listtarget="true" })
@Html.HiddenFor(m => m.MobyNumber)
<script id="areaCodeTemplate" type="text/x-jquery-template">
    <option value="${AreaCode}">${AreaCode}</option>
</script>
<br />
<script id="phoneNumberTemplate" type="text/x-jquery-template">
    <div class="numberselectbox">
        <strong>${FormattedPhoneNumber}</strong>   <a href="#" id="number"  class="rowSelection btn_simple" data-url="/Marketing/Moby/SelectPhoneNumber" data-redirect="/Marketing/Moby" data-value="${PhoneNumber}">Select</a><br/>
    </div>
</script>
<div id="phoneNumbers">
</div>

【问题讨论】：

您使用的是什么版本的 jQuery，您是在将 a 标签添加到 HTML 之后还是之前调用 $('#number').click(..) 函数？
$('#number').click(function(e){ 是首选方式，但必须在模板渲染并附加到 DOM 后应用。
我将整个视图添加到问题中，因此您的问题应该得到回答。
aand 我的 jquery 没有为 on 关键字更新足够的内容

标签： c# javascript jquery asp.net-mvc jquery-templates

【解决方案1】：

你可以试试jQuery的on()方法或者click()速记：

$(document).ready( function() {
     $('#number').on('click', function(e){
         // your method implementation here
         e.preventDefault();
     });
     // OR //
     $('#number').click(function(e){
         // your method implementation here
         e.preventDefault();
     });
 });

【讨论】：

e.preventDefault(); 需要阻止默认操作被触发
@dcodesmith 干杯，编辑我的答案以包括e.preventDefault();

【解决方案2】：

由于您使用模板生成元素，这些元素将是动态的，因此您需要使用委托事件模型。

另外，因为它是一个模板，所以不要为元素使用静态 id，因为元素可以重复 - 使用类属性代替

<script id="phoneNumberTemplate" type="text/x-jquery-template">
<div class="numberselectbox">
    <strong>${FormattedPhoneNumber}</strong>   <a href="#"  class="number rowSelection btn_simple" data-url="/Marketing/Moby/SelectPhoneNumber" data-redirect="/Marketing/Moby" data-value="${PhoneNumber}">Select</a><br/>
</div>

$(document).on('click', '.number', function(){
    //do something
})

【讨论】：