如何獲得一個按鈕的值或點擊Javascript或Jquery

Question

我會盡量做到儘可能直接點。基本上我使用jQuery和Ajax來調用一個PHP腳本並顯示數據庫中的成員。在每個成員名稱旁邊都有一個刪除按鈕。我想這樣做，當你點擊刪除按鈕時，它會刪除該用戶。只有那個用戶。我遇到的麻煩是試圖單擊從一個刪除按鈕的值。我會在下面發佈我的代碼。我已經嘗試了很多東西，現在正如你所看到的，我正在嘗試將URL中的哈希值更改爲該成員，然後從url中抓取值。這是行不通的，這個值在URL中永遠不會改變。所以我的問題是如何獲得被點擊的成員的價值。

<script type="text/javascript"> 
    $(document).delegate("#user_manage", "pagecreate", function() { 
     $.mobile.showPageLoadingMsg() 
     var friends = new Array(); 
     $.ajaxSetup({ 
      cache: false 
     }) 
     $.ajax({ 
      url: 'http://example.com/test/www/user_lookup.php', 
      data: "", 
      dataType: 'json', 
      success: function (data) { 
       $.mobile.hidePageLoadingMsg(); 
       var $member_friends = $('#user_list'); 
       $member_friends.empty(); 

       for (var i = 0, len = data.length; i < len; i++) { 
        $member_friends.append("<div class='user_container'><table><tr><td style='width:290px;font-size:15px;'>" + data[i].username + "</td><td style='width:290px;font-size:15px;'>" + data[i].email + "</td><td style='width:250px;font-size:15px;'>" + data[i].active + "</td><td><a href='#" + data[i].username + "' class='user_delete' data-role='none' onclick='showOptions();'>Options</a></td></tr><tr class='options_panel' style='display:none'><td><a href='#" + data[i].username + "' class='user_delete' data-role='none' onclick='showId();'>Delete</a> </td></tr></table></div>"); 

       } 
      } 
     }); 
    }); 
</script> 
        <script> 
        function showId() { 
        var url = document.URL; 
        var id = url.substring(url.lastIndexOf('#') + 1); 
        alert(id); 
         alert(url); 
        } 
        </script> 

Answer 1

爲什麼不在PHP腳本中構造數據？那麼你可以把按鈕onclick事件的索引（每個行的數據庫中的唯一變量）。因此，刪除按鈕將是：

<button onclick = "delete('indexnumber')">Delete</button>

那麼你可以使用該變量發送到另一個PHP腳本，從數據庫中刪除它。

Answer 2

$('body').on('click', 'a.user_delete', function() { 
    var url = document.URL; 
    var id = url.substring(url.lastIndexOf('#') + 1); 
    alert(id); 
    alert(url); 
}); 

Answer 3

IDEAS：

1：我認爲這將是更容易的串聯的字符串後追加到DOM元素。速度更快。

第二：在你的按鈕上，你可以添加一個額外的屬性與數據庫的用戶ID或其他東西，併發送到ajax調用。當越來越從按鈕點擊屬性，使用

$(this).attr('data-id-user'); 

Answer 4

<a href="#" class="user_delete" data-id-user="<?php echo $theUsersId ?>"><?php echo $username ?></a> 

像明智的，如果您在回調函數來創建你的標記拉下了JSON，你可以編碼喜歡所以這個屬性的用戶：

'<a href="#'+data[i].username+'" data-user-id="'+ data[i].username + '" class="user_delete" data-role="none" >Options</a>' 

因此，考慮你已經在做整體之情況應該是這個樣子：

$(document).delegate("#user_manage", "pagecreate", function() { 
    $.mobile.showPageLoadingMsg(); 
    var friends = new Array(), 
     $member_friends = $('#user_list'), 
     // lets jsut make the mark up a string template that we can call replace on 
     // extra lines and concatenation added for readability 
     deleteUser = function (e) { 
      var $this = $(this), 
       userId = $this.attr('data-id-user'), 
       href = $this.attr('href'), 
       deleteUrl = '/delete_user.php'; 

       alert(userId); 
       alert(href); 
       // your actual clientside code to delete might look like this assuming 
       // the serverside logic for a delete is in /delete_user.php 
       $.post(deleteUrl, {username: userId}, function(){ 
       alert('User deleted successfully!'); 
       }); 
     }, 
     showOptions = function (e) { 
      $(this).closest('tr.options_panel').show(); 
     }, 
     userTmpl = '<div id="__USERNAME__" class="user_container">' 
        + '<table>' 
        + '<tr>' 
        +  '<td style="width:290px;font-size:15px;">__USERNAME__</td>' 
        +  '<td style="width:290px;font-size:15px;">__EMAIL__</td>' 
        +  '<td style="width:250px;font-size:15px;">__ACTIVE__</td>' 
        +  '<td><a href="#__USERNAME__" data-id-user="__USERNAME__" class="user_options" data-role="none">Options</a></td>' 
        + '</tr>' 
        + '<tr class="options_panel" style="display:none">' 
        +  '<td><a href="#__USERNAME__" data-id-user="__USERNAME__" class="user_delete" data-role="none">Delete</a></td>' 
        + '</tr>' 
        + <'/table>' 
        + '</div>'; 


    $.ajaxSetup({ 
     cache: false 
    }) 

    $(document).delegate('#user_manage #user_container user_options', 'click.userlookup', showOptions) 
     .delegate('#user_manage #user_container user_delete', 'click.userlookup', deleteUser); 

    $.ajax({ 
     url: 'http://example.com/test/www/user_lookup.php', 
     data: "", 
     dataType: 'json', 
     success: function (data) { 
      $.mobile.hidePageLoadingMsg(); 
      var markup; 
      $member_friends.empty(); 

      for (var i = 0, len = data.length; i < len; i++) { 
       markup = userTmpl.replace('__USERNAME__', data[i].username) 
          .replace('__ACTIVE__', data[i].active) 
          .replace('__EMAIL__', data[i].email); 

       $member_friends.append(markup); 

      } 
     } 
    }); 
}); 

Answer 5

這裏是一個非常簡單的變化，你可以做：

替換此部分：

onclick='showId();'>Delete</a> 

有了這個：

onclick='showId("+data[i].id+");'>Delete</a> 

而這裏的新showId功能：

function showId(id) { 
        alert(id); 
       }