Jqueryクリック値のチェックが機能しない

Question

私は、クリックするとSQLデータベースから項目を追加/削除する機能を持っています。

追加または削除を参照しているかどうかを確認してコードを実行する条件を実行します。

add関数は完全に機能しますが、削除しないで同じコードを削除すると、明らかなものがありませんか？これを行うにはこれが最善の方法ですか？

jqueryの：

//add card from list 
$("#listcards a").click(function() { 
    if($(this).attr('add').length > 1) { 
     var value = $(this).attr('add'); 
     $.post('searchc.php',{add:value}, function(data){ 
     $("#add_result").html(data); 
     }); 
     return false; 
    } 
}); 

//remove card from list 
$("#listcards a").click(function() { 
    if($(this).attr('rem').length > 1) { 
     var value = $(this).attr('rem'); 
     $.post('searchc.php',{rem:value}, function(data){ 
     $("#add_result").html(data); 
     }); 
     return false; 
    } 
}); 

htmlコード：

<form id="listcards" method="post"> 
    <input type='hidden' id='lcard' name='lcard' value=''> 
    <div> 
     bla bla -> imagem no + ? ou por algum efeito css<a href="" add="bla bla">+</a> | <a href="" rem="bla bla">-</a><br> 
     coiso coiso <a href="" add="coiso coiso">+</a> | <a href="" rem="coiso coiso">-</a><br> 
    </div> 
</form> 

私もPOSTやdiv要素があまりにもうまくいくための形態であることする必要がありますか？

Answer 1

あなたを助けることができる あなたは問題を引き起こしすることができた、同じ要素に対して2つのクリックハンドラを持っています。 <a>要素ごとに両方のコードセットを実行する必要はありません。代わりに、要素に正確に彼らが何を表示するクラスを与え、その後、それらの要素にあなたのセレクタを制限

HTML：

<a href="" class="add" add="bla bla">+</a> | <a href="" class="remove" rem="bla bla"> 

スクリプト：

$("#listcards a.add").click(function() { 
    var value = $(this).attr('add'); 
    $.post('searchc.php',{add:value}, function(data){ 
    $("#add_result").html(data); 
    }); 
    return false; 
}); 

//remove card from list 
$("#listcards a.remove").click(function() { 
    var value = $(this).attr('rem'); 
    $.post('searchc.php',{rem:value}, function(data){ 
    $("#add_result").html(data); 
    }); 
    return false; 
}); 

Answer 2

使用これを行うにはonclickの機能それは

<a href="" add="coiso coiso" onclick="addthis('coiso coiso');">+</a> 
<a href="" rem="coiso coiso" onclick="removethis('coiso coiso');">-</a><br> 


function addthis(addthis) { 
    if(addthis.length > 1) { 
     alert(addthis); 
    // $.post('searchc.php',{add:addthis}, function(data){ 
    //  $("#add_result").html(data); 
    // }); 
     return false; 
    } 
} 

function removethis(remthis) { 
    if(remthis.length > 1) { 
     alert(remthis); 
    // $.post('searchc.php',{reb:remthis}, function(data){ 
    //  $("#add_result").html(data); 
    // }); 
     return false; 
    } 
} 

Answer 3

あなたはthisi意志のようにそれを使用することができます機能を削除するだけです。そして可能な場合はajaxを追加することができます。

$("#listcards .rem").click(function() { 
    var value = $(this).text(); 
    if($(this).length()>1) { 
    $.post('searchc.php',{rem:value}, function(data){ 
     $("#add_result").html(data); 
     }); 
    return false; 
}}); 

Answer 4

あなたのコードをフォローアップ、

$("#listcards a").click(function() { 
     var action = $(this).attr("add") ? "add" : "rem"; 
var value; 
     if(action == "add") 
       value = $(this).attr('add'); 
     if(action == "rem") 
      value = $(this).attr('rem'); 
    var param = {}; 
    param[action] = value; 
     $.post('searchc.php',param, function(data){ 
     $("#add_result").html(data); 
     }); 

    }); 

Answer 5

は、あなたがこのページ第一の時間をロードしているときに、任意のカードを持っていないと仮定します。次に、新しいカードを追加するをクリックします&あなたのhtmlに新しいカードが追加されました。 この新たに追加されたカードの場合、「remove」メソッドはページロード時にロードされたバインド（この新しいカード要素が存在しないとき）を取得しません。したがって、新たに追加されたカードでは、あなたのremoveメソッドが機能しません。

これを機能させるには、新しいカードでも削除メソッドを実行する必要があります。あなたはhtmlに新しいカードを入れた後にあなたが "add"の部分で呼び出すjs関数の一部を削除し続けることで、これを行うことができます。

function removeCard(){ 

// first unbind the click event for all cards if any & then bind it 

    $("#listcards a").off('click'); 

//remove card from list 

$("#listcards a").click(function() { 

    if($(this).attr('rem').length > 1) { 
     var value = $(this).attr('rem'); 
     $.post('searchc.php',{rem:value}, function(data){ 
     $("#add_result").html(data); 
     }); 
     return false; 
    } 
    }); 
} 

And you add part should be like this: 
//add card from list 
$("#listcards a").click(function() { 
    if($(this).attr('add').length > 1) { 
     var value = $(this).attr('add'); 
     $.post('searchc.php',{add:value}, function(data){ 
     $("#add_result").html(data); 
     removeCard(); // adding remove method here 
     }); 
     return false; 
    } 
});