Question

HTML：

<button type="button" onclick="deleteAdress('@_address.AddressID','@Model.CustomerID','@ViewData["appid"]','@ViewData["_retVal"]')">Delete</button>

JS：

$(document).ready(function () {
    var customerID = $("#hidcustomerid").val();
    if (customerID != "0") {
       function deleteAdress(adressId, customerId, appid, retVal) {
            window.location.href = '/Customer/DeleteAdress/?adressId=' + adressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal;
       }
   }
});

如果我使用deleteAdress的{{1}}功能，则功能有效。

如果我使用$(document).ready()内的deleteAdress ，则该功能会在点击按钮时显示错误。

错误：

未捕获的ReferenceError：未定义deleteAdress

剩余的HTML：

$(document).ready()

如何在<table> @foreach (ObjectModelLibrary.Address _address in Model.Addresses.List) { <tr> <th> <button type="button" class="btn btn-sm btn-danger" onclick="deleteAdress('@_address.AddressID','@Model.CustomerID','@ViewData["appid"]','@ViewData["_retVal"]')"><i class="icon-remove"></i>Delete</button> </th> </tr> } </table>函数中使用deleteAdress函数？

Answer 1

正如我在评论中最初提到的，您的函数不是全局函数，因此onclick处理程序无法看到它。

其次，在函数周围使用if无效（http://jsfiddle.net/TrueBlueAussie/gdptaxvv/），因为函数已提升到其父作用域内的顶部，因此它始终存在。您可以使用另一种声明函数的方法来避免这种情况，但我不推荐它，例如var deleteAddress = function(){}，但范围仍阻止onclick处理程序看到它。

作为一般准则，请不要将基于属性的处理程序与jQuery一起使用（例如onclick=""）。它将处理程序与事件注册分开，并且不支持多个处理程序。

添加新课程以识别您的删除按钮。例如下面示例中的class="deleteAddress"。
将任何键值作为data-属性注入项中，并以jQuery方式处理事件。这也意味着您的条件检查将按预期工作：

<强> e.g。包含数据属性的HTML：

<table>
@foreach (ObjectModelLibrary.Address _address in Model.Addresses.List) 
{
    <tr>
        <th>
            <button class="deleteAddress btn btn-sm btn-danger" type="button" data-addressId="@_address.AddressID" data-customerId="@Model.CustomerID" data-appId="@(ViewData["appid"])" data-retVal="@(ViewData["_retVal"])">Delete</button>
        </th>
    </tr>
}
</table>

注意： 我在两个属性上添加了一些()包装器，我觉得这可能会让Razor感到困惑，但除非它出错，否则可能不需要。

<强>代码：

$(document).ready(function () {
    var customerID = $("#hidcustomerid").val();
    if (customerID != "0") {
        $('.deleteAddress').click(function(){
              // Get key values from data- attributes "of the clicked button"
              var addressId = $(this).data("addressId"); 
              var customerId = $(this).data("customerId"); 
              var appid = $(this).data("appId"); 
              var retVal = $(this).data("retVal"); 
              window.location.href = '/Customer/DeleteAddress/?addressId=' + addressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal;
        });
    }
});

上面的示例假设按钮是每行一个，因此属性将与删除该行有关。

旁注：

我强烈建议使用Ajax进行删除而不是设置窗口位置。然后，您可以以交互方式删除行，而无需刷新页面。

<强> e.g。 Ajax版本：

$(function () {
    var customerID = $("#hidcustomerid").val();
    if (customerID != "0") {
        $('.deleteAddress').click(function(){
              // Get displayed row to delete
              var $tr = $(this).closest('tr');
              // Get key values from data- attributes "of the clicked button"
              var addressId = $(this).data("addressId"); 
              var customerId = $(this).data("customerId"); 
              var appid = $(this).data("appId"); 
              var retVal = $(this).data("retVal"); 
              $.get('/Customer/DeleteAdress/?addressId=' + addressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal).done(function(){
                   // Delete succeeded, delete the screen row
                   $tr.remove();
              });
        });
    }
});

您应该使用较短版本的$(document).ready(function(){});：

$(function(){
   // Your DOM ready code here.
});

它也支持这个版本（使用本地范围的$来避免冲突）：

jQuery(function($){
   // Your DOM ready code here using a locally scoped $
});

Answer 2

您可以在document.ready中调用该函数，但您应该在外部定义它。

Answer 3

简单的方法是在deleteAdress函数回调之外定义$(document).ready()。然后它将是全局可访问的（函数在定义它们的范围之外不可用）。

更好的选择是重构代码并在jQuery中而不是在内联属性中分配事件处理程序：

<button 
  type="button" 
  class="addressDelete"
  id='@Model.CustomerID' 
  data-address-id='@Model.AddressID' 
  data-appid='@ViewData["appid"]' 
  data-retval='@ViewData["_retVal"]'>
    Delete
</button>

然后用jQuery绑定函数：

$(document).ready(function () {
    $('.addressDelete').on('click', function() {
        var $this = $(this),
            adressId = $this.data('addressId'),
            customerId = this.id,
            appId = $this.data('appid'),
            retVal = $this.data('retval');

        window.location.href = '/Customer/DeleteAdress/?adressId=' + adressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal;
    }
});

这可以使您的Javascript远离HTML并使您的标记更加清晰，并可以提高启动性能。

Answer 4

deleteAddress函数仅在传递给document.ready的匿名函数的范围内定义。（事实上，它只是有条件地定义了。我甚至不确定如何使用函数提升。）为了在该范围之外使用它，它需要在该范围之外定义：

function deleteAdress(adressId, customerId, appid, retVal) {
    window.location.href = '/Customer/DeleteAdress/?adressId=' + adressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal;
}

$(document).ready(function () {
    //...
});

Answer 5

你为什么要这样？ deleteAdress是一个函数。如果需要，您可以从任何地方拨打电话。

试试这个：

$(document).ready(function () {
   var customerID = $("#hidcustomerid").val();
   if (customerID != "0") {
       // dont know what you want to do here. (function is called at button onclick)
   }
}

function deleteAdress(adressId, customerId, appid, retVal) {
   window.location.href = '/Customer/DeleteAdress/?adressId=' + adressId + "&customerId=" + customerId + "&appid=" + appid + "&retVal=" + retVal;
}

Answer 6

我不会使用内联JS。变化：

<button type="button" onclick="deleteAdress.....

要：

<button type="button" class="deleteAddress">Delete</button>

并在DOM准备好的内容中添加以下内容，如果在DOM就绪或外部定义函数，则无关紧要。但同样，你不应该抨击全球范围：

$('.deleteAddress').on('click', deleteAddress);

$（document）.ready（function（）Uncaught ReferenceError：未定义

6 个答案: