How to use .editable in a dynamically generated table

[ghost]

I use .editable like this:

                <td>
                    <a th:text="${#dates.format(plan.collectdate, 'yyyy-MM-dd')}"
                       href="#" th:id="date + (${plan.stage})" class="editable editable-click"
                    ></a>
                </td>

        $('.editable').editable({ });

The table is display after click a submit button. But the .editable function does not work!~~

Thanks you so much.

[abdaziz]

Hi, You need to use the option "selector" for dynamique generated DOM. here documentation about it: If selector is provided, editable will be delegated to the specified targets. Usefull for dynamically generated DOM elements. Please note, that delegated targets can't be initialized with emptytext and autotext options, as they actually become editable only after first click. You should manually set class editable-click to these elements. Also, if element originally empty you should add class editable-empty, set data-value="" and write emptytext into element: example: `

  < a href="#" data-name="username" data-type="text" class="editable-click editable-empty" data-value="" title="Username">Empty </ a>
  <!-- non-empty -->
  < a href="#" data-name="group" data-type="select" data-source="/groups" data-value="1" class="editable-click" title="Group">Operator </ a>
</div>     

<script>
$('#user').editable({
    selector: 'a',
    url: '/post',
    pk: 1
});
</script>`