Question

试图将可在表中使用的删除按钮放入具有表的模式中，就像单击事件根本没有触发一样。 Hit的不是后端代码，没有console.log（s）或js断点。我想念什么吗？

模态表

func isBoolean(String: yourString) -> boolean { 
    if yourString == "yes" 
       return true
    else 
       return false
}

应该调用的控制器

<table class="table table-hover table-md ">
  <thead>
    <tr>
      <td class="text-left TableHead">Role</td>
      <td class="text-right TableHead">Delete</td>
    </tr>
  </thead>

  @*--Table Body For Each to pull DB records--*@
  <tbody>
    @foreach (var role in Model.Roles)
    {
      <tr>
        <td>@role</td>
        <td>
          <button class="sqButton btnRed float-right zIndex" 
                  title="Delete" data-toggle="ajax-modal" data-target="#deleteRoleUser"
                  data-url="@Url.Action("Delete", "Administration",
                  new {Id = Model.Id , Type = "roleUser"})" >
            <i class="glyphicon glyphicon-remove"></i>
          </button>
        </td>
      </tr>
    }
  </tbody>
</table>

我不确定为什么按钮上的click事件根本不起作用。我尝试删除随机代码，但实际上丝毫没有使它至少移交给控制器的原因。

EDIT 添加了javascript

[HttpGet]
  public async Task<IActionResult> Delete(string id, string type)
  {         
    if (type == "user") {
      ViewBag.Type = "user";
      var user = await userManager.FindByIdAsync(id);
      if (user == null)
      {
        ViewBag.ErrorMessage = $"User with Id = {id} cannot be found";
        return View("NotFound");
      }
      var model = new EditUserViewModel
      {
        Id = user.Id,          
        UserName = user.UserName,           
      };
      ViewBag.UN = user.UserName;
      return PartialView("~/Views/Modals/_DeleteModalPartial.cshtml", model);
    }
    if (type == "roleUser")
    {
      ViewBag.Type = "roleUser";
      var role = await roleManager.FindByIdAsync(id);
      if (role == null)
      {
        ViewBag.ErrorMessage = $"Role with Id = {id} cannot be found";
        return View("NotFound");
      }
      var model = new EditRoleViewModel
      {
        Id = role.Id,
        RoleName = role.Name,
      };
      ViewBag.Role = role.Name;
      return PartialView("~/Views/Modals/_DeleteModalPartial.cshtml", model);
    }
    else
    {
      ViewBag.ErrorMessage = $"cannot be found";
      return View("NotFound");
    }       
  }

Answer 1

由于button在页面加载时不存在，因此您将必须创建一个事件委托给在页面加载时确实存在的事物，当事件最终出现在DOM中时，它将事件附加到正确的元素上

在这种情况下，我们将使用document（因为它总是在页面加载时存在，所以有人使用'body'）将事件委托给[data-toggle="ajax-modal"]，如下所示：

    $(document).on('click', '[data-toggle="ajax-modal"]', function (event) {
       // code here
    });

这将在页面加载时和页面加载后将事件附加到[data-toggle="ajax-modal"]元素上，如果以后再添加该元素。

Answer 2

尝试替换您的JavaScript代码

$('.sqButton').click( function (event) {  
    event.stopPropagation();
});

使用以下代码

$('.sqButton').click(function(event) {
    var url = $(this).data('url');
    $.get(url).done(function (data) {
     placeholderElement.html(data);
     placeholderElement.find('.modal').modal('show');
   });
  });

Answer 3

如果您手动强制点击，它会打中您的控制器吗？

    document.querySelector('.btnRed').click();

是否还有其他“劫持”点击事件？

模态表中的按钮不触发

3 个答案: