如何获得一个按钮的值或点击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); 
       }