将生成的 Javascript 事件添加到生成的 HTML 中


Add generated Javascript Events to generated HTML

我做了一堆研究,但似乎我找不到我问题的好答案。

我这里有这段代码:

            while($row = mysqli_fetch_row($query)){
            $result .= '
                <script>
                    function Click'.$DOMid.'01(){answer("'.$DOMid.'","'.$row[2].'", "accept");}
                    function Click'.$DOMid.'02(){answer("'.$DOMid.'","'.$row[2].'", "decline");}
                </script>
                <div  id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
                    <p>
                        Freundschaftsanfrage von: '.$row[2].'
                    </p>
                    <button id = "'.$DOMid.'01" onclick="Click'.$DOMid.'01">Accept</button>
                    <button id = "'.$DOMid.'02" onclick="Click'.$DOMid.'02">Decline</button>
                </div>
                ';
                $DOMid = $DOMid+1;
        }
        $result .= '<script>
                        function answer(id, user, type){
                            $.ajax({
                                method: "POST",
                                url: "systems/friends_system.php",
                                data:{type: type, user, <?php echo json_encode($log_username);?>}
                            }).done(function(r){
                                if(r.charAt(0) == "_"){
                                    window.location = "message.php?msg=" + r;
                                }else{
                                    _("id").style.display = "none";
                                }
                            });
                        }
                    </script>';
        echo $result;
        exit();

它的PHP代码,它为每个元素生成html和javascript。

但我认为我的 javascript 部分在这一点上没有被解析到浏览器抛出一个错误,即未定义 Clickxxx 函数。

生成的代码如下所示:

<script>
    function Click001(){answer("0","Drop", "accept");}
    function Click002(){answer("0","Drop", "decline");}
</script>
<div id="0" style="box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
    <p>
         Freundschaftsanfrage von: Drop
    </p>
        <button id="001" onclick="Click001">Accept</button>
        <button id="002" onclick="Click002">Decline</button>
</div>  
<script>
    function answer(id, user, type){
        $.ajax({
            method: "POST",
            url: "systems/friends_system.php",
            data:{type: type, user, <?php echo json_encode($log_username);?>}
        }).done(function(r){
            if(r.charAt(0) == "_"){
                window.location = "message.php?msg=" + r;
            }else{
                _("id").style.display = "none";
            }
        });
    }
</script>

Onclick是一个html事件,考虑到Click001是一个函数,所以用括号来调用它:

...button id="001" onclick="Click001()">...

你需要调用你的函数,这也是js的更好用法

 while($row = mysqli_fetch_row($query)){
            $result .= '
                <script>
                    function Click(accept)
                    {
                        if(accept){
                            answer("'.$DOMid.'","'.$row[2].'", "accept");
                        }else{
                            answer("'.$DOMid.'","'.$row[2].'", "decline");
                        }
                    }
                </script>
                <div  id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; padding:10px; border: 1px solid #0f0f0a;">
                    <p>
                        Freundschaftsanfrage von: '.$row[2].'
                    </p>
                    <button id = "'.$DOMid.'01" onclick="Click(true)">Accept</button>
                    <button id = "'.$DOMid.'02" onclick="Click(false)">Decline</button>
                </div>
                ';
                $DOMid = $DOMid+1;
        }
        $result .= '<script>
                        function answer(id, user, type){
                            $.ajax({
                                method: "POST",
                                url: "systems/friends_system.php",
                                data:{type: type, user, <?php echo json_encode($log_username);?>}
                            }).done(function(r){
                                if(r.charAt(0) == "_"){
                                    window.location = "message.php?msg=" + r;
                                }else{
                                    _("id").style.display = "none";
                                }
                            });
                        }
                    </script>';
        echo $result;

我重新发明了代码

现在看起来像这样:

$result .= '                    
                    <div  id = "'.$DOMid.'" style = "box-shadow: 5px 5px 2px #0f0f0a; margin: 10px; width:300px; height: 105px; padding:10px; border: 1px solid #0f0f0a;">
                        <p style = "height: 75px;">
                            <span style = "line-height: 75px; margin: auto 2px;">
                                Freundschaftsanfrage von: <a href = "/user.php?u='.$row[2].'">'.$row[2].'</a>
                            </span>
                            <span style = "line-height: 75px; margin: auto 2px;">
                                <img src = "/user/'.$row[2].'/profile_pic.png" height = 60px width = 50px alt= "'.$row[2].'">
                            </span>
                        </p>
                        <button id = "'.$DOMid.'01" onclick="answerswer('.$DOMid.', '''.$row[2].''', ''accept'')">Accept</button>
                        <button id = "'.$DOMid.'02" onclick="answerswer('.$DOMid.', '''.$row[2].''', ''decline'')">Decline</button>
                    </div>';

每个 JavaScript 现在都在原始文件中,并且只接受参数。

不需要通用的Javascript。