event.preventDefaultはajaxコールを防ぎます

Question

私はonclickイベントによってトリガされた関数の中で動作するようにajaxコールを取得しようとしています。 event.preventDefaultを使用すると、ページはリロードされませんが、ajax呼び出しは機能しません。データはデータベースに追加されません。私がその行をコメントアウトすると、ページはリロードされますが、他のすべてが機能します。

function clickFunction(elem) { 
    var var1 = elem.id; 
    var var2 = var1.split("_"); 
    // elem.preventDefault(); 


    if (var2[0] == "Add") { 
     if (var2[1] == "Calls") { 
      console.log("Calls"); 
      console.log(var1); 
      event.preventDefault(); 
      var data = $(this).serialize(); 
      $.post('progressSheetDynamic', data).done(function (response){ 
       $(".1").html(parseInt($('.1').html(), 10)+1); 
       Calls.update(50); 

      }); 
     } 
    } 
} 

のHTMLコード

<form action="{{ route("progressSheetDynamic") }}" method="post" id= {{ $addID }}> 
    <input name="increment" value="increment" type="hidden"> </input> 
    <input type="hidden" name="id" value= {{$activities}} > 
    <button type="submit" class="styleHover styleButton" onclick="clickFunction(this)" id= {{ 'Add_'.$newText }}> + </button> 
</form> 

私は、ログをチェックしていると機能はif文の中に起こっています。私はelem.preventDefault（）を実行して、ボタンのクリックイベントでpreventDefaultを使用してみました。しかし、これは動作しません。どちらも、falseを返すことを使用しません。

Answer 1

問題は、この行であるように思わ：

を

は、次に、関数の宣言を変更します

var data = $(this).serialize(); 

0123あなたの関数で

var data = $(elem.form).serialize(); 

this値はelemがbuttonであるのに対し、そうelem.formは（それはあなたが望んでいたデータだと仮定して）をシリアル化するために、フォームになります、windowオブジェクトへの参照になります。

コメントに記載されているとおり、一部のブラウザではeventはグローバル変数としてのみ定義されているため、属性にeventを渡して関数内で安全に受け取る必要があります。

属性：

onclick="clickFunction(this, event)" 

機能：IE8と下がevent.preventDefault()を持っていませんが、代わりにを設定することができることを

function clickFunction(elem, event) { 
    // ... 
} 

注意。

Answer 2

eventは、それが渡されていないため定義されません。 onclick="clickFunction(this)でボタンを通過しています。

onclick="clickFunction(event)"に変更してください。あなたはボタンやイベントの両方をしたい場合は、私が持っているものを見て、

function clickFunction(event) { 
    console.log(event) 
    ... 
} 

：

<button type="submit" class="styleHover styleButton" onclick="clickFunction(event, this);" /> 

<script> 
    function clickFunction(event, elem) { 

     console.log(event); 
     console.log(elem); 
     event.preventDefault(); 
    }  
</script> 

Answer 3

Elemのは、あなたは、このようにあなたがUncaught TypeError: elem.preventDefault is not a function

第二に、$を得るでしょう、this

しかし、ボタンclickFunction(this)にはpreventDefault()機能を持っていません（これ）を参照されたウィンドウを、渡すとき、ボタンを参照されます代わりに$（elem.form）でなければなりません。

以下は、構造を変更せずに元の問題を修正した方法です。（$（この）のためのelemの利用event.target、$（elem.form））

function clickFunction(event) { 
    var elem = event.target; // event.target will be equivalent to your elem 
    var var1 = elem.id; 
    var var2 = var1.split("_"); 
    event.preventDefault(); 


    if (var2[0] == "Add") { 
     if (var2[1] == "Calls") { 
      console.log("Calls"); 
      console.log(var1); 
      event.preventDefault(); 
      var data = $(elem.form).serialize(); // should be elem.form here to get correct data 
      $.post('progressSheetDynamic', data).done(function (response){ 
       $(".1").html(parseInt($('.1').html(), 10)+1); 
       Calls.update(50); 

      }); 
     } 
    } 
}