JQuery шаблон якорный тег нажмите

Question

У меня есть этот шаблон jquery, и мне нужно вызвать функцию jquery или javascript при щелчке этого тега привязки. Я попробовал это несколькими способами.

<a href="yourfunction()" 

Ive пытался

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

Так что, если кто-то может помочь было бы весьма признателен. Якорная метка, о которой идет речь, является номером телефона с номером номера.

@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> 

Answer 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(); 
    }); 
}); 

Answer 2

Поскольку вы используете шаблон для создания элементов, эти элементы будут динамичным, так что вы должны использовать делегированные модель событий.

Кроме того, поскольку это шаблон, не следует использовать статический идентификатор для элементов, так как элементы могут быть продублированы - атрибут использования класса вместо

<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 
})