3

i have this line of code in my view using the Telerik Grid:

      columns.Bound(o => o.URI).Width(10).Sortable(false)
                .ClientTemplate("<A class='btnGrid' id=source<#= ID #> onclick=GridSelection.addItem('<#= ID #>') >Add</A>").Title("").Width(50);

the GridSelection addItem and disableSelected functions' JS codes:

  GridSelection = {
      addItem: function (value) {

         var anchorOption = $("a[id=source" + value + "]");

         anchorOption.click(function (e) { // variable name changed from "event"
               e.preventDefault();
               return false;    // as suggested by mr. Hamdi
               });

         anchorOption.fadeTo("slow", .5);

         GridSelection.disableSelected(anchorOption, true);

         var data = $("#GridSource").data('tGrid').data;
         var selectedObject;
         for (var item in data) {
            if (data[item].ID == value) {
               selectedObject = data[item];
               break;
            }
         }

          var grid = $("#GridSelected").data('tGrid');
          var newData = $("#GridSelected").data('tGrid').dataSource._data;
          newData.push(selectedObject);
          grid.dataBind(newData);
          grid.sort("");
          anchorOption.fadeTo("slow", .5);
      },

      disableSelected: function (element, disable) {
              //false on IEs 6, 7 and 8
              if (!$.support.leadingWhitespace) {
                  if (disable) {
                      $(element).attr('disabled', 'disabled');
                  } else {
                      $(element).removeAttr('disabled');
                  }
              }
     },
         // other GridSelection subfunctions here...

As I run the MVC3 web app in IE, it runs well because of the GridSelection.disableSelected function, but in Chrome and Mozilla Firefox, the event.preventDefault(); doesn't work. The anchor link still adds the data item even after the user has already added it there.

Is it OK having the preventDefault method inside the GridSelection.addItemfunction that was being prevented?

Which attribute is being prevented by the preventDefault , is it the href or is it the onclick?

What wrong with this? How can I fix this bug? Anyone who can help?

4

4 回答 4

4

您的链接的标记有一个内联点击处理程序，并且没有href：

<A class='btnGrid' id=source<#= ID #> onclick=GridSelection.verify('<#= ID #>') >Add</A>

如果这是GridSelection.verify()您试图阻止的，您应该注意：

  1. 内联点击处理程序可能在您的其他事件处理程序之前被调用，这意味着从您的其他处理程序中取消它为时已晚，无论如何
  2. e.preventDefault()不会阻止其他处理程序运行，它会停止事件的默认操作，链接是导航到href属性中指定的 url。而且您没有指定href.

如果你想在同一个元素上为同一个事件有多个处理程序，你应该按照你希望它们被调用的顺序用 jQuery 将它们全部分配，然后如果你想停止其余的处理程序，则使用其中一个处理程序中的event.stopImmediatePropagation()方法他们从运行。

鉴于您没有显示要阻止的部分代码，我不知道如何将其放入您显示的代码中，但一般原则是：

<a id="myLink" href="someURL">My link</a>

<script>
$("#myLink").click(function(e) {
    // some processing
    if (someCondition)
       e.stopImmediatePropagation();
    // some other processing
});

$("#myLink").click(function(e) {
    // some processing
});
</script>

说了这么多，如果该.verify()函数调用您的.addItem()函数并且您打算阻止未来的点击事件在同一链接上工作，因为第一次点击应该验证/添加，然后您不想再次添加，那么在你的.addItem()函数中做这样的事情：

anchorOption.removeAttr("onclick");
// or
anchorOption[0].onclick = null;
于 2012-02-24T06:25:15.907 回答
3

您是否尝试过添加return false;而不是event.preventDefault();

于 2012-02-24T04:03:06.120 回答
1

如果锚点有一个id使用 id 选择器而不是使用它作为属性选择器。

改变

$("a[id=source" + value + "]")

至

$("#source" + value)

我不是说这是问题，但你可以尝试改变它。

更新：

event.preventDefault()停止浏览器跟随设置为href锚元素属性的链接。它不会阻止或停止click事件。

于 2012-02-24T04:06:45.993 回答
1

您是否尝试过重命名事件变量？叫我疯了，但我似乎记得有问题只是试着function(e) {e.preventDefault();}看看会发生什么

于 2012-02-24T04:28:49.393 回答