[CSS] ios mobile > span is not clickable

[출처] http://stackoverflow.com/questions/32370807/ipad-ios-8-click-event-on-dynamic-span-not-detected

We are integrating MathQuill with a keypad. (http://mathquill.com/demo.html). Things work fine on IOS7. With IOS8 Safari, we have trouble detecting the click events.

Details

For mathquill integration, we have a span element in the document. Mathquill adds its elements to this span and creates an input area dynamically.

<span id="editable-math" class="mathquill-editable"></span>

The keypad should pop when someone clicks in the mathquill input area. we have an element $primaryToolbar with the keypad. So we do:

$(".mathquill-editable").on("click", function(e) {
    $primaryToolbar.show();   // shows the keypad
 }

To detect click events on a non-anchor element on IOS8 Safari, we add following css

.mathquill-editable {
     cursor: pointer;
 }

However, the click event to show the keypad never triggers and keypad is not shown. I will really appreciate some pointers on what I am missing here.

Extra info:

If we also listen to touchstart, the keypad is shown.

$(".mathquill-editable").on("click touchstart", function(e) {
    $primaryToolbar.show();
 }

But in this case, the input box becomes non-clickable. I can add or delete, but I cannot click inside the input box to place my cursor in a particular position. (Ability to place cursor within input area is a requirement). So I suspect that touchstart is not the way to go.

Will appreciate some pointers. Thanks for reading.