將生成的Javascript事件添加到生成的HTML

Question

我做了很多研究，但似乎找不到很好的答案。

我在這里有此代碼：

            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>

Answer 1

Onclick是一個html事件，並認為Click001是一個函數，因此將其用括號括起來：

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

Answer 2

您需要調用函數，這也是對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;

Answer 3

我重新制定了守則

現在看起來像這樣：

$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="answer('.$DOMid.', \''.$row[2].'\', \'accept\')">Accept</button>
                        <button id = "'.$DOMid.'02" onclick="answer('.$DOMid.', \''.$row[2].'\', \'decline\')">Decline</button>
                    </div>';

現在，每個JavaScript都位於原始文件中，並且僅帶有參數。

無需通用Javascript。