javascript - 添加新的动态引导卡不起作用

Question

我将在我的页面中插入新的 boostrap 卡。我的问题是，我没有成功在我的内容中包含新卡。当我单击“插入”时，不显示该卡

代码下方

如果记录存在则显示新的引导卡

                  <div class="row">
                    <button type="button" class="btn btn-primary" aria-label="Insert"  id="insert">
                      <span aria-hidden="true">Insert</span>
                    </button>
                  </div>
                  <div class="row">
                    <ul class="row list-unstyled" id="list">
<?php
  $i = 0;

  while ($QoptionValue->fetch()) {
.....
?>
                      <li class="col-md-4" id="element'<?php echo $i; ?>">
                        <div class="card">
                          <h4 class="card-header">Card title <a class="close" href="#">×</a></h4>
                          <div class="card-body">
                            <div class="card-text">
                              <div><?php ..... ?></div>
                          </div>
                        </div>
                      </li>
<?php
    $i++;
  }
?>
                    </ul>
  </div>

在内容中显示新卡或第一张卡

<?php
$card = '<li class="col-md-4" id="element0">';
$card .= '<div class="card">';
$card .= '<h4 class="card-header">Card title <a class="close" href="#">Remove</a></h4>';
$card .= '<div class="card-body">';
$card .= '<div class="card-text">';
$card .= '<div>';

for ($l=0, $n=count($languages); $l<$n; $l++) {
  $card .= Language->getImage($languages[$l]['code']) . ' ' . HTML::inputField('option_value[' . $i . '][option_value_description][name][' . $l . ']', $options_name) . '<br />';
  $card .=  HTML::hiddenField('option_value[' . $i . '][option_value_description][language_id][' . $l . ']', $options_name);
}

$card .= '</div>';
$card .= '<div>';

$card .= HTML::inputField('option_value[' . $i . '][sort_order]', $QoptionValue->value('sort_order'), 'id="sort_order[' . $i . ']"');
$card .= '</div>';
$card .= '<div>';
$card .= '</div>';
$card .= '</div>';
$card .= '</li>';
?>

                <script>
                  $('#insert').click(function(){
                    $( "ul#list" ).append( "<?php echo $card; ?>" );
                  });
                </script>

                <script type="text/javascript">
                  $('.close').click(function(){
                    var $target = $(this).parents('li');
                    $target.hide('slow', function(){ $target.remove(); });
                  })
                </script>

控制台错误

这条线似乎有问题:

                $( "ul#list" ).append(""<li class=\"col-md-4\" id=\"element0\"><div class=\"row\"><div class=\"col-md-12\"><div class=\"card\"><h4 class=\"card-header\"><a class=\"close\" href=\"#\">Supprimer<\/a><\/h4><div class=\"card-body\">Nom de la valeur<div><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/gb.svg\" alt=\"Anglais\" title=\"Anglais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][0]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][0]\" \/><img src=\"http:\/\/localhost\/test_option\/shop\/sources\/third_party\/flag-icon-css\/flags\/4x3\/fr.svg\" alt=\"Francais\" title=\"Francais\" width=\"16\" height=\"12\" \/> <input type=\"text\" name=\"option_value[0][option_value_description][name][1]\" class=\"form-control\" \/><br \/><input type=\"hidden\" name=\"option_value[0][option_value_description][language_id][1]\" \/><\/div><div class=\"row\"><span class=\"col-md-4\">Ordre de tri<\/span><\/div><\/div><\/div><\/div><\/div><\/li>"");


Uncaught SyntaxError: missing ) after argument list

Answer 1

最好使用 json_encode() 将任何 PHP 变量传递给 javascript。使用 json_encode() 您将始终获得格式正确且引号已转义的 JavaScript 对象。

<script>
    $('#insert').click(function(){
        $( "ul#list" ).append(<?php echo json_encode($card); ?>);
    });
</script>