如何獲得單擊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

思路：

第一：我認為連接字符串然后將其附加到DOM元素會更容易。 它更快。

第二：在您的按鈕上，您可以添加帶有數據庫或其他內容的用戶ID的額外屬性，並將其發送給ajax調用。 從按鈕單擊獲取屬性時，使用

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

Answer 2

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

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

那么您可以使用該變量將其發送到另一個PHP腳本，以將其從數據庫中刪除。

Answer 3

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

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