3

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

GridSelectionのaddItemおよびdisableSelected関数のJSコード：

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

IEでMVC3Webアプリを実行すると、GridSelection.disableSelected関数が原因で正常に実行されますが、ChromeおよびMozillaFirefoxでは機能しevent.preventDefault();ません。アンカーリンクは、ユーザーがデータアイテムを追加した後でも、データアイテムを追加します。

防止されていpreventDefaultた関数内にメソッドがあっても大丈夫ですか？GridSelection.addItem

どの属性がによって防止されていますかpreventDefault、それはhrefですか、それともonclickですか？

これの何が問題なのですか？このバグを修正するにはどうすればよいですか？助けることができる人はいますか？

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で呼び出したい順序で割り当て、残りのハンドラーを停止する場合は、ハンドラーの1つで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 に答える