javascript - 验证使用 Jeditable 更改的值

Question

我不太擅长javascript和ajax，所以我请你帮忙。我使用 Symfony2 和 Twig，我有一个字段，我用 jediable 更改它，但它的值应该是唯一的。所以我在 Controller 操作中检查了这一点，但我无法成功使应用程序正常运行。我尝试了很多东西，最接近我想要的结果是:

   if (count($same) == 0) {
            // add to database
        } else { 
                $response = new Response();
                $response->setContent('<div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">OK</button>
            <strong>This value is already used!</strong> Please choose another.
        </div>');
                $response->send();

输出这个不错的错误:

但是当我点击 OK 时，jeditable 插件仍然有效，整个错误变成可编辑的，所以输入字段的值包含 $response->setContent() 中设置的所有 HTML

因为整个街区

        <div class="alert alert-error">
            <button type="button" class="close" data-dismiss="alert">OK</button>
            <strong>This value is already used!</strong> Please choose another.
        </div>

在类为“.edit”的 div 中，当我单击它时，它变得可编辑并包含整个 block 。我想要的是当用户单击 Controller 中生成的警报以从 jeditable 返回输入字段时，其值作为他开始编辑之前类别的原始名称或空值。

这是我的 .js 文件，但它不会使输入字段为空(但会打印 wokring):(

$(document).ready(function(){

     $('.edit').editable(path, {
         cancel    : 'Cancel',
         submit    : 'Save',
         tooltip   : 'Click to edit'
     });

     $('.bla').on('click','.alert', function(){        
         console.log('working');    
         $("input[type=text]").hmtl('');
     });
});

HTML

<span class="right-spacer"><strong id="{{cat.id}}"class="edit bla">{{ cat.name }}</strong>

有什么解决方案吗？

Answer 1

据我了解，您的弹出错误是在有人单击具有无效值的“保存”按钮时动态创建的，这意味着弹出窗口不存在于 $(document).ready时间。这就是为什么这部分:

$('.alert').on('click', function(){
    $("input[type=text]").val('');
});

永远不会被执行。如果你想让这个功能起作用，你将需要使用委托(delegate)，因为你使用 Jquery 这将非常容易。

而不是 $('.alert').on('click', function(){

你将不得不使用类似 $('body').on('click','.alert', function(){ 的东西

其中 body 是 .alert 的父元素，例如，如果您知道您的弹出窗口将在 ID 为 first_div 的 div 中创建(类似 <div id="first_div"> )，您将改为 $('#first_div').on('click','.alert', function(){

也就是说div会监听他内部的点击事件，所以他离弹窗越近效率越高。