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

IDEAS：

第一：我认为将字符串连接起来更容易，然后将它附加到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);
                }

如何获取按钮的值值单击Javascript或Jquery

5 个答案: